Gwt-highcharts-3d-scatter

GWTハイチャート-3D散布図

以下は、3D散布図の例です。

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

3D散布図の例を以下に示します。

構成

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

option3D

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

chart.setOptions3D(new Options3D()
   .setEnabled(true)
   .setAlpha(10)
   .setBeta(30)
   .setDepth(250)
   .setViewDistance(5)
   .setFrame(new Frame()
      .setBottom(new FramePanel()
         .setSize(1)
         .setColor(new Color(0, 0, 0, 0.02))
      )
      .setBack(new FramePanel ()
         .setSize(1)
         .setColor(new Color(0, 0, 0, 0.04))
      )
      .setSide(new FramePanel()
         .setSize(1)
         .setColor(new Color(0, 0, 0, 0.06))
      )
   )
)

例

*_HelloWorld.java_*

package com.finddevguides.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Color;
import org.moxieapps.gwt.highcharts.client.Frame;
import org.moxieapps.gwt.highcharts.client.Frame.FramePanel;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Options3D;
import org.moxieapps.gwt.highcharts.client.Series;

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()
         .setMarginBottom(100)
         .setMarginRight(50)
         .setType(Series.Type.SCATTER)
         .setOptions3D(new Options3D()
            .setEnabled(true)
            .setAlpha(10)
            .setBeta(30)
            .setDepth(250)
            .setViewDistance(5)
            .setFrame(new Frame()
               .setBottom(new FramePanel()
                  .setSize(1)
                  .setColor(new Color(0, 0, 0, 0.02))
               )
               .setBack(new FramePanel ()
                  .setSize(1)
                  .setColor(new Color(0, 0, 0, 0.04))
               )
               .setSide(new FramePanel()
                  .setSize(1)
                  .setColor(new Color(0, 0, 0, 0.06))
               )
            )
         )
         .setChartTitleText("3D Scatter Plot");

      chart.getYAxis()
         .setMin(0)
         .setMax(10)
         .setAxisTitle(null);

      chart.getXAxis()
         .setMin(0)
         .setMax(10)
         .setGridLineWidth(1);

      chart.getZAxis()
         .setMin(0)
         .setMax(10);

      chart.setLegend(new Legend()
         .setEnabled(false)
      );

      chart.addSeries(chart.createSeries()
         .setName("Reading")
         .setColorByPoint(true)
         .setPoints(new Number[][] {
            {1, 6, 5}, {8, 7, 9}, {1, 3, 4}, {4, 6, 8}, {5, 7, 7}, {6, 9, 6},
            {7, 0, 5}, {2, 3, 3}, {3, 9, 8}, {3, 6, 5}, {4, 9, 4}, {2, 3, 3},
            {6, 9, 9}, {0, 7, 0}, {7, 7, 9}, {7, 2, 9}, {0, 6, 2}, {4, 6, 7},
            {3, 7, 7}, {0, 1, 7}, {2, 8, 6}, {2, 3, 7}, {6, 4, 8}, {3, 5, 9},
            {7, 9, 5}, {3, 1, 7}, {4, 4, 2}, {3, 6, 2}, {3, 1, 6}, {6, 8, 5},
            {6, 6, 7}, {4, 1, 1}, {7, 2, 7}, {7, 7, 0}, {8, 8, 9}, {9, 4, 1},
            {8, 3, 4}, {9, 8, 9}, {3, 5, 3}, {0, 2, 4}, {6, 0, 2}, {2, 1, 3},
            {5, 8, 9}, {2, 1, 1}, {9, 7, 6}, {3, 0, 2}, {9, 9, 0}, {3, 4, 8},
            {2, 6, 1}, {8, 9, 2}, {7, 6, 5}, {6, 3, 1}, {9, 3, 1}, {8, 9, 3},
            {9, 1, 0}, {3, 8, 7}, {8, 0, 0}, {4, 9, 7}, {8, 6, 2}, {4, 3, 0},
            {2, 3, 5}, {9, 1, 4}, {1, 1, 4}, {6, 0, 2}, {6, 1, 6}, {3, 8, 8},
            {8, 8, 7}, {5, 5, 0}, {3, 9, 6}, {5, 4, 3}, {6, 8, 3}, {0, 1, 5},
            {6, 7, 3}, {8, 3, 2}, {3, 8, 3}, {2, 1, 6}, {4, 6, 7}, {8, 9, 9},
            {5, 4, 2}, {6, 1, 3}, {6, 9, 5}, {4, 8, 2}, {9, 7, 4}, {5, 4, 2},
            {9, 6, 1}, {2, 7, 3}, {4, 5, 4}, {6, 8, 1}, {3, 4, 0}, {2, 2, 6},
            {5, 1, 2}, {9, 9, 7}, {6, 9, 9}, {8, 4, 3}, {4, 1, 7}, {6, 2, 5},
            {0, 4, 9}, {3, 5, 9}, {6, 9, 1}, {1, 9, 2}
         })
      );

      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

3D散布図