GWT Highcharts - Grafico a torta 3D
Di seguito è riportato un esempio di grafico a torta 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 torta 3D.
Configurazioni
Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.
option3D
Configura il tipo di grafico a torta in modo che sia basato su 3D. Options3D imposta le opzioni 3D abilitate.
chart.setOptions3D(new Options3D()
.setEnabled(true)
.setAlpha(45)
.setBeta(0)
.setDepth(100)
)
Esempio
HelloWorld.java
package com.tutorialspoint.client;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Options3D;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;
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.labels.DataLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.PieDataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.PiePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Cursor;
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.PIE)
.setChartTitleText("3D Pie Chart Demo")
.setPlotBackgroundColor((String) null)
.setPlotBorderWidth(null)
.setPlotShadow(false)
.setPiePlotOptions(new PiePlotOptions()
.setAllowPointSelect(true)
.setCursor(Cursor.POINTER)
.setPieDataLabels(new PieDataLabels()
.setConnectorColor("#000000")
.setEnabled(true)
.setColor("#000000")
.setFormatter(new DataLabelsFormatter() {
@Override
public String format(DataLabelsData dataLabelsData) {
return "<b>" + dataLabelsData.getPointName() + "</b>: " + dataLabelsData.getYAsDouble() + " %";
}
})
)
.setStartAngle(126)
.setDepth(75)
)
.setLegend(new Legend()
.setLayout(Legend.Layout.VERTICAL)
.setAlign(Legend.Align.RIGHT)
.setVerticalAlign(Legend.VerticalAlign.TOP)
.setX(-100)
.setY(100)
.setFloating(true)
.setBorderWidth(1)
.setBackgroundColor("#FFFFFF")
.setShadow(true)
)
.setToolTip(new ToolTip()
.setFormatter(new ToolTipFormatter() {
@Override
public String format(ToolTipData toolTipData) {
return "" + toolTipData.getPointName() + ": " + toolTipData.getYAsDouble() + " %";
}
}))
.setColors("#EBEE00", "#FF00FF", "#0000FF")
.setOptions3D(new Options3D()
.setEnabled(true)
.setAlpha(45)
.setBeta(0)
.setDepth(100)
);
chart.addSeries(chart.createSeries()
.setName("Browser share")
.setPoints(new Point[]{
new Point("Dots", 80.0),
new Point("Fruit", 10.0),
new Point("Ghosts", 10.0)
})
);
RootPanel.get().add(chart);
}
}
Risultato
Verifica il risultato.