GWT Highcharts - Graphique en pourcentage

Voici un exemple de graphique à aires empilées.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voyons maintenant un exemple de graphique à aires empilées.

plotOptions

Le plotOptions est un objet wrapper pour les objets de configuration pour chaque type de série. Les objets de configuration peuvent être remplacés pour chaque élément de série comme indiqué dans le tableau de séries. Il s'agit d'empiler les valeurs de chaque série les unes sur les autres.

Configurez l'empilement du graphique à l'aide de plotOptions.area.stackingcomme d'habitude". Les valeurs possibles sont nulles qui désactivent l'empilement, les empilements «normaux» par valeur et «pour cent» empilent le graphique par des pourcentages.

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

Exemple

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

Résultat

Vérifiez le résultat.