Gwt-highcharts-area-inverted

値が反転した面グラフ

以下は、値を反転した面グラフの例です。

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。 次に、軸を反転した面グラフの例を見てみましょう。 また、追加の構成を理解し、チャートに反転属性を追加します。

チャート

チャートの反転をtrueとして構成します。

反転する軸を構成します。 trueの場合、x軸は垂直で、y軸は水平です。 チャートに棒シリーズが存在する場合、同じものが反転します。 ここで、デフォルト値はfalseです。

chart.setInverted(true)

例

*_HelloWorld.java_*

package com.finddevguides.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.ChartSubtitle;
import org.moxieapps.gwt.highcharts.client.Credits;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
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.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 com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.AREA)
         .setInverted(true)
         .setChartTitleText("Average fruit consumption during one week")
         .setChartSubtitle(new ChartSubtitle()
            .setStyle(new Style()
               .setPosition("absolute")
               .setRight("0px")
               .setBottom("0px")
            )
         )
         .setLegend(new Legend()
            .setLayout(Legend.Layout.VERTICAL)
            .setAlign(Legend.Align.RIGHT)
            .setVerticalAlign(Legend.VerticalAlign.TOP)
            .setX(-150)
            .setY(100)
            .setFloating(true)
            .setBorderWidth(1)
            .setBackgroundColor("#FFFFFF")
         )
         .setToolTip(new ToolTip()
            .setFormatter(
               new ToolTipFormatter() {
                  public String format(ToolTipData toolTipData) {
                     return "<b>" + toolTipData.getSeriesName() + "</b><br/>" +
                        toolTipData.getXAsString() + ": " + toolTipData.getYAsLong();
                  }
               }
            )
         )
         .setCredits(new Credits()
            .setEnabled(false)
         )
         .setAreaPlotOptions(new AreaPlotOptions()
            .setFillOpacity(0.5)
         );

         chart.getXAxis()
            .setCategories(
               "Monday",  "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
            );

         chart.getYAxis()
            .setAxisTitleText("Y-Axis")
            .setLabels(new YAxisLabels()
            .setFormatter(new AxisLabelsFormatter() {
               public String format(AxisLabelsData axisLabelsData) {
                  return String.valueOf(axisLabelsData.getValueAsLong());
               }
            })
         );

         chart.addSeries(chart.createSeries()
            .setName("John")
            .setPoints(new Number[] {3, 4, 3, 5, 4, 10, 12})
         );
         chart.addSeries(chart.createSeries()
            .setName("Jane")
            .setPoints(new Number[] {1, 3, 4, 3, 3, 5, 4})
         );
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

反転した値を持つエリアグラフ