Highcharts GWT - Gráfico de área percentual
A seguir está um exemplo de gráfico de área empilhado.
Já vimos as configurações usadas para desenhar um gráfico no capítulo Highcharts Configuration Syntax . Agora, vamos ver um exemplo de gráfico de área empilhado.
plotOptions
O plotOptions é um objeto wrapper para objetos de configuração para cada tipo de série. Os objetos de configuração podem ser substituídos para cada item da série conforme fornecido na matriz da série. Isso é para empilhar os valores de cada série uns sobre os outros.
Configure o empilhamento do gráfico usando plotOptions.area.stackingcomo "normal". Os valores possíveis são nulos, o que desativa o empilhamento, "normal" empilha por valor e "porcentagem" empilha o gráfico por porcentagens.
chart.setAreaPlotOptions(new AreaPlotOptions()
.setStacking(Stacking.PERCENT)
.setLineColor("#666666")
.setLineWidth(1)
.setMarker(new Marker()
.setLineWidth(1)
.setLineColor("#666666")
)
);
Exemplo
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);
}
}
Resultado
Verifique o resultado.