GWT Highcharts - 堆疊柱形圖

以下是堆疊柱形圖的一個示例。

我們在 Highcharts 配置語法 章節中已經看到了用於繪製圖表的配置。現在，讓我們看一個堆疊柱形圖的示例。我們還將瞭解其他配置。

plotOptions

使用 plotOptions.series.stacking 將圖表的堆疊配置為“normal”。可能的值為 null（停用堆疊）、“normal”（按值堆疊）和“percent”（按百分比堆疊系列）。

chart.setSeriesPlotOptions(new SeriesPlotOptions()
   .setStacking(Stacking.NORMAL)
)

示例

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.AxisTitle;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Credits;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
import org.moxieapps.gwt.highcharts.client.labels.DataLabels;

import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.SeriesPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()  
         .setType(Type.COLUMN)  
         .setChartTitleText("Historic World Population by Region")  
         .setChartSubtitleText("Source: Wikipedia.org")  
         .setColumnPlotOptions(new ColumnPlotOptions()  
            .setDataLabels(new DataLabels()  
               .setEnabled(true)  
            )  
         )  
        .setSeriesPlotOptions(new SeriesPlotOptions()
            .setStacking(Stacking.NORMAL)
         )
         .setLegend(new Legend()  
            .setBackgroundColor("#FFFFFF")  
            .setReversed(true)
         )  
         .setCredits(new Credits()  
            .setEnabled(false)  
         )  
         .setToolTip(new ToolTip()  
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  return toolTipData.getSeriesName() + ": " + toolTipData.getYAsLong() +" million";  
               }
         }));
         chart.getXAxis()  
            .setCategories("Africa", "America", "Asia", "Europe", "Oceania");  
         chart.getYAxis()  
            .setAxisTitle(new AxisTitle()  
               .setText("Population (millions)")  
               .setAlign(AxisTitle.Align.HIGH)  
            );  
         chart.addSeries(chart.createSeries()  
            .setName("Year 1800")  
            .setPoints(new Number[] { 107, 31, 635, 203, 2 })  
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Year 1900")  
            .setPoints(new Number[] { 133, 156, 947, 408, 6 })  
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Year 2008")  
            .setPoints(new Number[] { 973, 914, 4054, 732, 34 })  
         );  
      RootPanel.get().add(chart);
   }
}

結果

驗證結果。