堆疊和分組柱狀圖

下面是堆疊和分組柱狀圖的一個示例。

我們已經看過 Highcharts 配置語法 章節中用於繪製圖表時使用的配置了。現在讓我們來看一下其他配置，還要看到我們在 **plotoptions** 中是如何新增堆疊屬性的。

給出堆疊和分組柱狀圖的一個示例如下。

plotOptions

plotOptions 是每個系列型別配置物件的包裝物件。每個系列的配置物件還可以針對系列陣列中給出的每個系列項進行覆蓋。目的是將每個系列的值堆疊在一起。目的是將每個系列的值堆疊在一起。

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

chart.setColumnPlotOptions(new ColumnPlotOptions()  
   .setStacking(Stacking.NORMAL)  
); 

series

配置每個系列的堆疊以識別系列組。

chart.addSeries(chart.createSeries()  
   .setName("John")  
   .setPoints(new Number[] {5, 3, 4, 7, 2})  
   .setStack("male")  
);  

示例

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnPlotOptions;
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() {
      final Chart chart = new Chart()  
         .setType(Type.COLUMN)  
         .setChartTitleText("Total fruit consumption, grouped by gender")  
         .setColumnPlotOptions(new ColumnPlotOptions()  
            .setStacking(Stacking.NORMAL)  
         ); 

      chart.getXAxis()  
         .setCategories("Apples", "Oranges", "Pears", "Grapes", "Bananas");  

      chart.getYAxis()  
         .setAllowDecimals(false)  
         .setMin(0)  
         .setAxisTitleText("Number of fruits");  

      chart.addSeries(chart.createSeries()  
         .setName("John")  
         .setPoints(new Number[] {5, 3, 4, 7, 2})  
         .setStack("male")  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("Joe")  
         .setPoints(new Number[] {3, 4, 4, 2, 5})  
         .setStack("male")  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("Jane")  
         .setPoints(new Number[] {2, 2, 3, 2, 1})  
         .setStack("female")  
      );  
      chart.addSeries(chart.createSeries()  
         .setName("Janet")  
         .setPoints(new Number[] {3, 0, 4, 4, 3})  
         .setStack("female")  
      );  
      RootPanel.get().add(chart);
   }
}

結果

驗證結果。