以下は、列、線、および円のあるチャートの例です。
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);
}
}結果を確認します。
