Gwt-highcharts-3d-pie

GWTハイチャート-3D円グラフ

以下は、3D円グラフの例です。

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

3D円グラフの例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

option3D

円グラフの種類を3Dベースに構成します。 Options3D は、有効な3Dオプションを設定します。

chart.setOptions3D(new Options3D()
   .setEnabled(true)
   .setAlpha(45)
   .setBeta(0)
   .setDepth(100)
)

例

*_HelloWorld.java_*

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

結果

結果を確認します。

3D円グラフ