Gwt-highcharts-column-rotated

GWTハイチャート-ラベルが回転した列

以下は、ラベルが回転した縦棒グラフの例です。

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

回転したラベルを持つ縦棒グラフの例を以下に示します。

dataLabels

dataLabelsは、チャート内のデータラベルを処理するラッパーオブジェクトです。

度単位のテキスト回転。 より複雑な構造のため、回転したデータラベルでは背景、境界線、およびパディングが失われることに注意してください。 デフォルトは0です。

chart.addSeries(chart.createSeries()
   .setName("Population")
   .setPoints(new Number[] { 34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
      17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
      11.7, 11.2  })
   )
   .setColumnPlotOptions(new ColumnPlotOptions()
      .setDataLabels(new DataLabels()
      .setEnabled(true)
      .setRotation(-90)
      .setColor("#FFFFFF")
      .setAlign(Align.RIGHT)
      .setX(-3)
      .setY(10)
      .setFormatter(new DataLabelsFormatter() {
         @Override
         public String format(DataLabelsData dataLabelsData) {
            return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble());
         }
      })
     .setStyle(new Style()
        .setFont("normal 13px Verdana, sans-serif")
     )
   )
);

例

*_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.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.Labels.Align;
import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.DataLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.XAxisLabels;

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.i18n.client.NumberFormat;
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("World's largest cities per 2008")
         .setMargin(50, 50, 100, 80)
         .setToolTip(new ToolTip()
         .setFormatter(new ToolTipFormatter() {
            @Override
            public String format(ToolTipData toolTipData) {
               return "<b>" + toolTipData.getXAsString() + "</b><br/>" +
                  "Population in 2008: " +
                  NumberFormat.getFormat("0.0").format(toolTipData.getYAsDouble()) +
                  " millions";
            }
         })
      );

       chart.getXAxis()
         .setCategories("Tokyo", "Jakarta", "New York", "Seoul", "Manila", "Mumbai", "Sao Paulo",
         "Mexico City", "Dehli", "Osaka", "Cairo", "Kolkata", "Los Angeles", "Shanghai",
         "Moscow", "Beijing", "Buenos Aires", "Guangzhou", "Shenzhen", "Istanbul" )
         .setLabels(new XAxisLabels()
         .setRotation(-45)
         .setAlign(Align.RIGHT)
         .setStyle(new Style()
            .setFont("normal 13px Verdana, sans-serif")
         )
      );
      chart.getYAxis()
         .setMin(0)
         .setAxisTitleText("Population (millions)");

      chart.addSeries(chart.createSeries()
         .setName("Population")
         .setPoints(new Number[] { 34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
            17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
            11.7, 11.2  })
      ).setColumnPlotOptions(new ColumnPlotOptions()
         .setDataLabels(new DataLabels()
            .setEnabled(true)
            .setRotation(-90)
            .setColor("#FFFFFF")
            .setAlign(Align.RIGHT)
            .setX(-3)
            .setY(10)
            .setFormatter(new DataLabelsFormatter() {
               @Override
               public String format(DataLabelsData dataLabelsData) {
                  return NumberFormat.getFormat("0.0").format(dataLabelsData.getYAsDouble());
               }
            })
            .setStyle(new Style()
               .setFont("normal 13px Verdana, sans-serif")
            )
         )
      );
      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

回転ラベル付きの縦棒グラフ