Gwt-highcharts-column-percentage

積み上げパーセンテージの列

以下は、パーセンテージを持つ積み上げ縦棒グラフの例です。

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。 追加の構成と、 plotoptions でスタッキング属性を追加した方法を見てみましょう。

以下に、パーセンテージを含む積み上げ縦棒グラフの例を示します。

plotOptions

plotOptionsは、各シリーズタイプの構成オブジェクトのラッパーオブジェクトです。 また、各シリーズの構成オブジェクトは、シリーズ配列で指定された各シリーズ項目に対してオーバーライドできます。 これは、各シリーズの値を互いの上に積み重ねることです。 これは、各シリーズの値を互いの上に積み重ねることです。

plotOptions.column.stackingを「パーセント」として使用して、チャートの積み重ねを構成します。 可能な値はnullで、スタックは無効になり、「通常」のスタックは値で、「パーセント」はチャートをパーセントでスタックします。

chart.setColumnPlotOptions(new ColumnPlotOptions()
   .setStacking(Stacking.PERCENT)
);

例

*_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.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
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.PERCENT)
         )
         .setToolTip(new ToolTip()
            .setFormatter(new ToolTipFormatter() {
               @Override
               public String format(ToolTipData toolTipData) {
                  return toolTipData.getSeriesName() + ": " + toolTipData.getYAsLong() +
                      " ("+ Math.round(toolTipData.getPercentage()) + "%)";
               }
            })
         );

         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})
         );
         chart.addSeries(chart.createSeries()
            .setName("Joe")
            .setPoints(new Number[] {3, 4, 4, 2, 5})
         );
         chart.addSeries(chart.createSeries()
            .setName("Jane")
            .setPoints(new Number[] {2, 2, 3, 2, 1})
         );
         chart.addSeries(chart.createSeries()
            .setName("Janet")
            .setPoints(new Number[] {3, 0, 4, 4, 3})
         );
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

パーセント付きの積み上げ縦棒グラフ