Colonne avec pourcentage empilé

Voici un exemple de graphique à colonnes empilées avec des pourcentages.

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voyons maintenant les configurations supplémentaires et comment nous avons ajouté l'attribut d'empilement dansplotoptions.

Un exemple de graphique à colonnes empilées avec des pourcentages est donné ci-dessous.

plotOptions

PlotOptions est un objet wrapper pour les objets de configuration pour chaque type de série. Les objets de configuration pour chaque série peuvent également ê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. Il s'agit d'empiler les valeurs de chaque série les unes sur les autres.

Configurez l'empilement du graphique en utilisant plotOptions.column.stacking comme "pourcentage". Les valeurs possibles sont nulles, ce qui désactive l'empilement, les piles «normales» par valeur et «pourcentage» empile le graphique par des pourcentages.

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

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.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.PERCENT)  
         )
         .setToolTip(new ToolTip()
            .setFormatter(new ToolTipFormatter() {							
               @Override
               public String format(ToolTipData toolTipData) {
                  return toolTipData.getSeriesName() + ": " + toolTipData.getYAsLong() +  
	                  " ("+ Math.round(toolTipData.getPercentage()) + "%)";
               }
            })
         );

         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})             
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Joe")  
            .setPoints(new Number[] {3, 4, 4, 2, 5})	           
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Jane")  
            .setPoints(new Number[] {2, 2, 3, 2, 1})  	            
         );  
         chart.addSeries(chart.createSeries()  
            .setName("Janet")  
            .setPoints(new Number[] {3, 0, 4, 4, 3})	           
         );  
      RootPanel.get().add(chart);
   }
}

Résultat

Vérifiez le résultat.