Highcharts de GWT: gráfico de áreas apiladas

A continuación se muestra un ejemplo de un gráfico de áreas apilado.

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 áreas apilado.

plotOptions

PlotOptions es un objeto contenedor para objetos de configuración para cada tipo de serie. Los objetos de configuración se pueden anular para cada elemento de la serie como se indica en la matriz de la serie. Esto es para apilar los valores de cada serie uno encima del otro.

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

chart.setAreaPlotOptions(new AreaPlotOptions()  
   .setStacking(Stacking.NORMAL)  
   .setLineColor("#666666")  
   .setLineWidth(1)  
   .setMarker(new Marker()  
      .setLineWidth(1)  
      .setLineColor("#666666")  
   )  
);

Ejemplo

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.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels;

import org.moxieapps.gwt.highcharts.client.plotOptions.AreaPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.AREA)
         .setChartTitleText("Historic and Estimated Worldwide Population Growth by Region")
         .setChartSubtitleText("Source: Wikipedia.org")
         .setAreaPlotOptions(new AreaPlotOptions()  
            .setStacking(Stacking.NORMAL)  
            .setLineColor("#666666")  
            .setLineWidth(1)  
            .setMarker(new Marker()  
               .setLineWidth(1)  
               .setLineColor("#666666")  
            )  
         )
         .setToolTip(new ToolTip()
         .setFormatter(new ToolTipFormatter() {							
            @Override
            public String format(ToolTipData toolTipData) {
               return toolTipData.getXAsString() + ": " +  
                  NumberFormat.getFormat("0.0").format(toolTipData.getPercentage()) + "% (" +  
                  NumberFormat.getFormat("#,###").format(toolTipData.getYAsDouble()) + " millions)";
            }
         }));

         XAxis xAxis = chart.getXAxis();
         xAxis.setCategories("1750", "1800", "1850", "1900", "1950", "1999", "2050");
         xAxis.setTickmarkPlacement(XAxis.TickmarkPlacement.ON);  
         xAxis.setAxisTitleText(null);  

         YAxis yAxis = chart.getYAxis();
         yAxis.setAxisTitleText("Billions");
         yAxis.setLabels(new YAxisLabels()
            .setFormatter(new AxisLabelsFormatter() {
               @Override
               public String format(AxisLabelsData axisLabelsData) {
                  return String.valueOf(axisLabelsData.getValueAsLong() / 1000);
               }
            }));

         chart.addSeries(chart.createSeries()  
            .setName("Asia")  
            .setPoints(new Number[] { 502, 635, 809, 947, 1402, 3634, 5268 })  
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Africa")  
            .setPoints(new Number[] { 106, 107, 111, 133, 221, 767, 1766 })  
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Europe")  
            .setPoints(new Number[] { 163, 203, 276, 408, 547, 729, 628 })  
         );  
         chart.addSeries(chart.createSeries()  
            .setName("America")  
            .setPoints(new Number[] { 18, 31, 54, 156, 339, 818, 1201 })  
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Oceania")  
            .setPoints(new Number[] { 2, 2, 2, 6, 13, 30, 46 })  
         );  
      RootPanel.get().add(chart);
   }
}

Resultado

Verifique el resultado.