Gwt-highcharts-bar-basic

GWTハイチャート-基本的な棒グラフ

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

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。 次に、基本的な棒グラフの例を見てみましょう。 また、追加の構成も理解します。 チャートのtype属性を変更しました。

チャート

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

chart.setType(Type.BAR);

例

*_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.Credits;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
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.DataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.BarPlotOptions;

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.BAR)
         .setChartTitleText("Historic World Population by Region")
         .setChartSubtitleText("Source: Wikipedia.org")
         .setBarPlotOptions(new BarPlotOptions()
            .setDataLabels(new DataLabels()
               .setEnabled(true)
            )
         )
         .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)
         )
         .setCredits(new Credits()
            .setEnabled(false)
         )
         .setToolTip(new ToolTip()
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  return toolTipData.getSeriesName() + ": " + toolTipData.getYAsLong() +" million";
               }
         }));
         chart.getXAxis()
            .setCategories("Africa", "America", "Asia", "Europe", "Oceania");
         chart.getYAxis()
            .setAxisTitle(new AxisTitle()
               .setText("Population (millions)")
               .setAlign(AxisTitle.Align.HIGH)
            );
         chart.addSeries(chart.createSeries()
            .setName("Year 1800")
            .setPoints(new Number[] { 107, 31, 635, 203, 2 })
         );
         chart.addSeries(chart.createSeries()
            .setName("Year 1900")
            .setPoints(new Number[] { 133, 156, 947, 408, 6 })
         );
         chart.addSeries(chart.createSeries()
            .setName("Year 2008")
            .setPoints(new Number[] { 973, 914, 4054, 732, 34 })
         );
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

基本的な棒グラフ