GWT Highcharts - Grafico ad area percentuale

Di seguito è riportato un esempio di un grafico ad area in pila.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts . Vediamo ora un esempio di grafico ad area in pila.

plotOptions

Il plotOptions è un oggetto wrapper per oggetti di configurazione per ogni tipo di serie. Gli oggetti di configurazione possono essere sovrascritti per ogni elemento della serie come indicato nell'array della serie. Questo serve per impilare i valori di ogni serie uno sopra l'altro.

Configurare l'impilamento del grafico utilizzando plotOptions.area.stackingcome normale". I valori possibili sono null che disabilitano lo stacking, "normale" impila per valore e "percentuale" impila il grafico per percentuali.

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

Esempio

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

Risultato

Verifica il risultato.