Gwt-highcharts-column-range

GWTハイチャート-列範囲

以下は、範囲を使用した縦棒グラフの例です。

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

範囲を使用した縦棒グラフの例を以下に示します。

構成

ここで追加の構成を見てみましょう。

チャート

グラフの種類を「列範囲」ベースに設定します。 chart.typeは、チャートのシリーズタイプを決定します。 デフォルト値は「line」です。

chart.setType(Type.COLUMN_RANGE)

例

*_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.Series.Type;
import org.moxieapps.gwt.highcharts.client.Style;
import org.moxieapps.gwt.highcharts.client.ToolTip;

import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.Labels.Align;
import org.moxieapps.gwt.highcharts.client.labels.XAxisLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnRangePlotOptions;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()
         .setType(Type.COLUMN_RANGE)
         .setChartTitleText("Temperature variation by month")
         .setChartSubtitleText("Observed in Vik i Sogn, Norway, 2009")
         .setInverted(true)
         .setLegend(new Legend()
            .setEnabled(false)
         )
         .setToolTip(new ToolTip()
            .setValueSuffix("°C")
         )
         .setColumnRangePlotOptions(new ColumnRangePlotOptions()
            .setDataLabels(new DataLabels()
               .setEnabled(true)
               .setY(0)
               .setFormatter(new DataLabelsFormatter() {
                  @Override
                  public String format(DataLabelsData dataLabelsData) {
                     return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble()) + " °C";
                  }
               })
            )
         );

         chart.getXAxis()
            .setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
         )
         .setLabels(new XAxisLabels()
            .setRotation(-45)
            .setAlign(Align.RIGHT)
            .setStyle(new Style()
               .setFont("normal 13px Verdana, sans-serif")
            )
         );
         chart.getYAxis()
            .setMin(0)
            .setAxisTitleText("Temperature ( °C )");

         chart.addSeries(chart.createSeries()
            .setName("Temperatures")
            .setPoints(new Number[][]{
               {-9.7, 9.4},
               {-8.7, 6.5},
               {-3.5, 9.4},
               {-1.4, 19.9},
               {0.0, 22.6},
               {2.9, 29.5},
               {9.2, 30.7},
               {7.3, 26.5},
               {4.4, 18.0},
               {-3.1, 11.4},
               {-5.2, 10.4},
               {-13.5, 9.8}
            })
         );
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

範囲を使用した縦棒グラフ