Gwt-highcharts-3d-column

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

以下は3D縦棒グラフの例です。

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

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

構成

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

option3D

縦棒グラフタイプを3Dベースに構成します。 Options3D は、有効な3Dオプションを設定します。

chart.setOptions3D(new Options3D()
   .setEnabled(true)
   .setAlpha(15)
   .setBeta(15)
   .setViewDistance(25)
   .setDepth(40)
)

例

*_HelloWorld.java_*

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

結果

結果を確認します。

3D縦棒グラフ