Gwt-highcharts-combinations-column

列、線、および円グラフ

以下は、列、線、および円のあるチャートの例です。

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

列、線、および円を含む組み合わせグラフの例を以下に示します。

構成

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

シリーズ

散布図ベースのチャートタイプを構成します。 series.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。

chart.addSeries(chart.createSeries()
   .setType(Type.COLUMN)
);

例

*_HelloWorld.java_*

package com.finddevguides.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.LabelItem;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.Style;
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.PiePlotOptions;

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()
         .setChartTitleText("Combination chart")
         .setToolTip(new ToolTip()
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  String s;
                  if (toolTipData.getPointName() != null) {//the pie chart
                     s = toolTipData.getPointName() + ": " +
                     toolTipData.getYAsLong() + " fruits";
                  } else {
                     s = toolTipData.getXAsString() + ": " +
                     toolTipData.getYAsLong();
                  }
                  return s;
               }
            })
         )
         .setLabelItems(new  LabelItem()
            .setHtml("Total fruit consumption")
            .setStyle(new Style()
               .setLeft("40px")
               .setTop("8px")
               .setColor("black")
            )
         );
      chart.getXAxis()
         .setCategories("Apples", "Oranges", "Pears", "Bananas", "Plums");

      chart.addSeries(chart.createSeries()
         .setName("Jane")
         .setType(Series.Type.COLUMN)
         .setPoints(new Number[]{3, 2, 1, 3, 4})
      );
      chart.addSeries(chart.createSeries()
         .setName("John")
         .setType(Series.Type.COLUMN)
         .setPoints(new Number[]{2, 3, 5, 7, 6})
      );
      chart.addSeries(chart.createSeries()
         .setName("Joe")
         .setType(Series.Type.COLUMN)
         .setPoints(new Number[]{4, 3, 3, 9, 0})
      );
      chart.addSeries(chart.createSeries()
         .setName("Average")
         .setType(Series.Type.SPLINE)
         .setPoints(new Number[]{3, 2.67, 3, 6.33, 3.33})
      );

      chart.addSeries(chart.createSeries()
         .setName("Total consumption")
         .setType(Series.Type.PIE)
         .setPoints(new Point[]{
            new Point("Jane", 13),
            new Point("John", 23),
            new Point("Joe", 19)
         })
         .setPlotOptions(new PiePlotOptions()
            .setCenter(100, 80)
            .setSize(100)
            .setShowInLegend(false)
            .setDataLabels(new DataLabels()
               .setEnabled(false)
            )
         ));
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

列、線、円グラフ