GWT Highcharts - Grafico a colonne 3D
Di seguito è riportato un esempio di un grafico a colonne 3D.
Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .
Di seguito viene fornito un esempio di grafico a colonne 3D.
Configurazioni
Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.
option3D
Configurare il tipo di grafico a colonne in modo che sia basato su 3D. Options3D imposta le opzioni 3D abilitate.
chart.setOptions3D(new Options3D()
.setEnabled(true)
.setAlpha(15)
.setBeta(15)
.setViewDistance(25)
.setDepth(40)
)
Esempio
HelloWorld.java
package com.tutorialspoint.client;
import org.moxieapps.gwt.highcharts.client.AxisTitle;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Options3D;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
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(Series.Type.COLUMN)
.setOptions3D(new Options3D()
.setEnabled(true)
.setAlpha(15)
.setBeta(15)
.setViewDistance(25)
.setDepth(40)
)
.setMarginTop(80)
.setMarginRight(40)
.setChartTitleText("Total Fruit Consumption, grouped by gender");
chart.getXAxis()
.setCategories("Apples", "Oranges", "Pears", "Grapes", "Bananas");
chart.getYAxis()
.setAllowDecimals(false)
.setMin(0)
.setAxisTitle(new AxisTitle()
.setText("Number of Fruits")
);
chart.setToolTip(new ToolTip()
.setHeaderFormat("<b>{point.key}</b><br>")
.setPointFormat("<span style=\"color:{series.color}\">\\u25CF</span> {series.name}: {point.y} / {point.stackTotal}")
);
chart.setColumnPlotOptions(new ColumnPlotOptions()
.setStacking(Stacking.NORMAL)
.setDepth(40)
);
chart.addSeries(chart.createSeries()
.setName("John")
.setStack("male")
.setPoints(new Number[] {5, 3, 4, 7, 2})
)
.addSeries(chart.createSeries()
.setName("Joe")
.setStack("male")
.setPoints(new Number[] {3, 4, 4, 2, 5})
)
.addSeries(chart.createSeries()
.setName("Jane")
.setStack("female")
.setPoints(new Number[] {2, 5, 6, 2, 1})
)
.addSeries(chart.createSeries()
.setName("Janet")
.setStack("female")
.setPoints(new Number[] {3, 0, 4, 4, 3})
);
RootPanel.get().add(chart);
}
}
Risultato
Verifica il risultato.