Gwt-highcharts-spline-symbols

GWTハイチャート-シンボル付きスプラインチャート

このチャートを描画するために使用される構成は、リンク：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章ですでに見ています。 ここで、シンボルを使用したスプラインチャートをさらに理解するために、次の例を考えてみましょう。

構成

marker.symbolプロパティを使用して、一連のチャートにシンボルを追加します。 'square'、 'diamond’のような事前設定されたシンボル、または画像へのURLを指定できます。 マーカーは、シリーズのデータ​​の任意のポイントに追加することもできます。

chart.createSeries()
   .setName("Tokyo")
   .setPlotOptions(
      new SplinePlotOptions()
      .setMarker(
         new Marker()
            .setSymbol(Marker.Symbol.SQUARE)
      )
   )

例

*_HelloWorld.java_*

package com.finddevguides.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.SplinePlotOptions;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.SPLINE)
         .setChartTitleText("Monthly Average Temperature")
         .setChartSubtitleText("Source: WorldClimate.com");

      XAxis xAxis = chart.getXAxis();
         xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

      YAxis yAxis = chart.getYAxis();
      yAxis.setAxisTitleText("Temperature °C");
      yAxis.setLabels(
         new YAxisLabels()
         .setFormatter(new AxisLabelsFormatter() {
            @Override
            public String format(AxisLabelsData axisLabelsData) {
               return axisLabelsData.getValueAsLong() + "°";
            }
         })
      );

      ToolTip toolTip = new ToolTip();
      toolTip.setValueSuffix("°C")
         .setCrosshairs(true)
         .setShared(true);

      chart.setToolTip(toolTip);

      chart.setSplinePlotOptions(new SplinePlotOptions()
         .setMarker(
         new Marker()
            .setRadius(4)
            .setLineColor("#666666")
            .setLineWidth(1)
         )
      );

      chart.addSeries(
         chart.createSeries()
            .setName("Tokyo")
            .setPlotOptions(
               new SplinePlotOptions()
               .setMarker(
                  new Marker()
                  .setSymbol(Marker.Symbol.SQUARE)
               )
            )
         .setPoints(
            new Point[]{
               new Point(7.0),
               new Point(6.9),
               new Point(9.5),
               new Point(14.5),
               new Point(18.2),
               new Point(21.5),
               new Point(25.2),
               new Point(26.5)
               .setMarker(
                  new Marker()
                     .setSymbol("http://highcharts.com/demo/gfx/sun.png")
               ),
               new Point(23.3),
               new Point(18.3),
               new Point(13.9),
               new Point(9.6)
            }
         )
      );

      chart.addSeries(
         chart.createSeries()
            .setName("London")
            .setPlotOptions(
               new SplinePlotOptions()
                  .setMarker(
                     new Marker()
                        .setSymbol(Marker.Symbol.DIAMOND)
                  )
            )
            .setPoints(
               new Point[]{
                  new Point(3.9)
                  .setMarker(
                     new Marker()
                        .setSymbol("http://highcharts.com/demo/gfx/snow.png")
                  ),
                  new Point(4.2),
                  new Point(5.7),
                  new Point(8.5),
                  new Point(11.9),
                  new Point(15.2),
                  new Point(17.0),
                  new Point(16.6),
                  new Point(14.2),
                  new Point(10.3),
                  new Point(6.6),
                  new Point(4.8),
               }
            )
      );
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

シンボル付きスプライングラフ