Gráfico de colunas empilhadas e agrupadas

A seguir está um exemplo de um Gráfico de colunas empilhadas e agrupadas.

Já vimos a configuração usada para desenhar um gráfico no capítulo Highcharts Configuration Syntax . Vamos agora ver as configurações adicionais e também como adicionamos o atributo de empilhamento emplotoptions.

Um exemplo de Gráfico de colunas empilhadas e agrupadas é fornecido abaixo.

plotOptions

O plotOptions é um objeto wrapper para objetos de configuração para cada tipo de série. Os objetos de configuração para cada série também podem ser substituídos para cada item da série, conforme fornecido na matriz da série. Isso é para empilhar os valores de cada série uns sobre os outros. Isso é para empilhar os valores de cada série uns sobre os outros.

Configure o empilhamento do gráfico usando plotOptions.column.stacking como "normal". Os valores possíveis são nulos, o que desativa o empilhamento, pilhas "normais" por valor e "porcentagem" pilhas do gráfico por porcentagens.

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

Series

Configure a pilha de cada série para identificar o grupo da série.

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

Exemplo

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);
   }
}

Resultado

Verifique o resultado.