Gwt-highcharts-area-stacked

GWTハイチャート-積み上げ面グラフ

以下は積み上げ面グラフの例です。

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。 次に、積み上げ面グラフの例を見てみましょう。

plotOptions

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

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

chart.setAreaPlotOptions(new AreaPlotOptions()
   .setStacking(Stacking.NORMAL)
   .setLineColor("#666666")
   .setLineWidth(1)
   .setMarker(new Marker()
      .setLineWidth(1)
      .setLineColor("#666666")
   )
);

例

*_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.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels;

import org.moxieapps.gwt.highcharts.client.plotOptions.AreaPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.AREA)
         .setChartTitleText("Historic and Estimated Worldwide Population Growth by Region")
         .setChartSubtitleText("Source: Wikipedia.org")
         .setAreaPlotOptions(new AreaPlotOptions()
            .setStacking(Stacking.NORMAL)
            .setLineColor("#666666")
            .setLineWidth(1)
            .setMarker(new Marker()
               .setLineWidth(1)
               .setLineColor("#666666")
            )
         )
         .setToolTip(new ToolTip()
         .setFormatter(new ToolTipFormatter() {
            @Override
            public String format(ToolTipData toolTipData) {
               return toolTipData.getXAsString() + ": " +
                  NumberFormat.getFormat("0.0").format(toolTipData.getPercentage()) + "% (" +
                  NumberFormat.getFormat("#,###").format(toolTipData.getYAsDouble()) + " millions)";
            }
         }));

         XAxis xAxis = chart.getXAxis();
         xAxis.setCategories("1750", "1800", "1850", "1900", "1950", "1999", "2050");
         xAxis.setTickmarkPlacement(XAxis.TickmarkPlacement.ON);
         xAxis.setAxisTitleText(null);

         YAxis yAxis = chart.getYAxis();
         yAxis.setAxisTitleText("Billions");
         yAxis.setLabels(new YAxisLabels()
            .setFormatter(new AxisLabelsFormatter() {
               @Override
               public String format(AxisLabelsData axisLabelsData) {
                  return String.valueOf(axisLabelsData.getValueAsLong()/1000);
               }
            }));

         chart.addSeries(chart.createSeries()
            .setName("Asia")
            .setPoints(new Number[] { 502, 635, 809, 947, 1402, 3634, 5268 })
         );
         chart.addSeries(chart.createSeries()
            .setName("Africa")
            .setPoints(new Number[] { 106, 107, 111, 133, 221, 767, 1766 })
         );
         chart.addSeries(chart.createSeries()
            .setName("Europe")
            .setPoints(new Number[] { 163, 203, 276, 408, 547, 729, 628 })
         );
         chart.addSeries(chart.createSeries()
            .setName("America")
            .setPoints(new Number[] { 18, 31, 54, 156, 339, 818, 1201 })
         );
         chart.addSeries(chart.createSeries()
            .setName("Oceania")
            .setPoints(new Number[] { 2, 2, 2, 6, 13, 30, 46 })
         );
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

積み上げ面グラフ