Colonna con percentuale in pila

Di seguito è riportato un esempio di un grafico a colonne in pila con percentuali.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts . Vediamo ora configurazioni aggiuntive e anche come abbiamo aggiunto l'attributo di impilamento inplotoptions.

Di seguito viene fornito un esempio di grafico a colonne in pila con percentuali.

plotOptions

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

Configurare l'impilamento del grafico utilizzando plotOptions.column.stacking come "percentuale". I valori possibili sono null che disabilita la sovrapposizione, "normale" impila per valore e "percentuale" impila il grafico per percentuali.

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

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

Risultato

Verifica il risultato.