Columna con porcentaje apilado
A continuación se muestra un ejemplo de un gráfico de columnas apiladas con porcentajes.
Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Veamos ahora configuraciones adicionales y también cómo hemos agregado el atributo de apilamiento enplotoptions.
A continuación se muestra un ejemplo de un gráfico de columnas apiladas con porcentajes.
plotOptions
PlotOptions es un objeto contenedor para objetos de configuración para cada tipo de serie. Los objetos de configuración para cada serie también se pueden anular para cada elemento de la serie como se indica en la matriz de series. Esto es para apilar los valores de cada serie uno encima del otro. Esto es para apilar los valores de cada serie uno encima del otro.
Configure el apilamiento del gráfico usando plotOptions.column.stacking como "porcentaje". Los valores posibles son nulos, lo que deshabilita el apilamiento, "normal" apila por valor y "porcentaje" apila el gráfico por porcentajes.
chart.setColumnPlotOptions(new ColumnPlotOptions()
.setStacking(Stacking.PERCENT)
);
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.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);
}
}
Resultado
Verifique el resultado.