Gwt-highcharts-column-stacked-grouped
提供:Dev Guides
積み上げおよびグループ化された縦棒グラフ
以下は、積み上げられグループ化された縦棒グラフの例です。
link:/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。 追加の構成と、 plotoptions でスタッキング属性を追加した方法を見てみましょう。
積み上げてグループ化された縦棒グラフの例を以下に示します。
plotOptions
plotOptionsは、各シリーズタイプの構成オブジェクトのラッパーオブジェクトです。 また、各シリーズの構成オブジェクトは、シリーズ配列で指定された各シリーズ項目に対してオーバーライドできます。 これは、各シリーズの値を互いの上に積み重ねることです。 これは、各シリーズの値を互いの上に積み重ねることです。
plotOptions.column.stackingを使用して「標準」としてチャートの積み重ねを構成します。 可能な値はnullで、スタックは無効になり、「通常」のスタックは値で、「パーセント」はチャートをパーセントでスタックします。
chart.setColumnPlotOptions(new ColumnPlotOptions()
.setStacking(Stacking.NORMAL)
);
シリーズ
シリーズのグループを識別するために各シリーズのスタックを構成します。
chart.addSeries(chart.createSeries()
.setName("John")
.setPoints(new Number[] {5, 3, 4, 7, 2})
.setStack("male")
);
例
*_HelloWorld.java_*
package com.finddevguides.client;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;
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()
.setType(Type.COLUMN)
.setChartTitleText("Total fruit consumption, grouped by gender")
.setColumnPlotOptions(new ColumnPlotOptions()
.setStacking(Stacking.NORMAL)
);
chart.getXAxis()
.setCategories("Apples", "Oranges", "Pears", "Grapes", "Bananas");
chart.getYAxis()
.setAllowDecimals(false)
.setMin(0)
.setAxisTitleText("Number of fruits");
chart.addSeries(chart.createSeries()
.setName("John")
.setPoints(new Number[] {5, 3, 4, 7, 2})
.setStack("male")
);
chart.addSeries(chart.createSeries()
.setName("Joe")
.setPoints(new Number[] {3, 4, 4, 2, 5})
.setStack("male")
);
chart.addSeries(chart.createSeries()
.setName("Jane")
.setPoints(new Number[] {2, 2, 3, 2, 1})
.setStack("female")
);
chart.addSeries(chart.createSeries()
.setName("Janet")
.setPoints(new Number[] {3, 0, 4, 4, 3})
.setStack("female")
);
RootPanel.get().add(chart);
}
}
結果
結果を確認します。