Highcharts de GWT: gráfico de columnas apiladas

A continuación se muestra un ejemplo de un gráfico de columnas apiladas.

Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veamos un ejemplo de un gráfico de columnas apiladas. También entenderemos la configuración adicional.

plotOptions

Configure el apilado del gráfico usando plotOptions.series.stackingcomo normal". Los valores posibles son nulos, que deshabilita el apilamiento, "normal" apila por valor y "porcentaje" apila la serie por porcentajes.

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

Ejemplo

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

Resultado

Verifica el resultado.