Gwt-highcharts-line-time

時系列、ズーム可能なチャート

このチャートを描画するために使用される構成は、リンク：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章ですでに見ています。 時系列のズーム可能なチャートをさらに理解するために、次の例を考えてみましょう。

構成

ここで、追加の構成/実行された手順について説明します。

チャート

チャートを構成してズーム可能にします。 chart.zoomType は、ユーザーがマウスをドラッグしてズームできる寸法を決定します。 これに可能な値は、x、y、またはxyです。

chart.setZoomType(BaseChart.ZoomType.X)

plotOptions

plotOptionsを使用してグラフの領域を構成します。

chart.setAreaPlotOptions(new AreaPlotOptions()
   .setFillColor(new Color()
     .setLinearGradient(0, 0, 0, 1)
     .addColorStop(0, 69, 114, 167)
     .addColorStop(1, 2, 0, 0, 0)
   )
   .setMarker(new Marker()
      .setEnabled(false)
      .setHoverState(new Marker()
         .setEnabled(true)
         .setRadius(5)
      )
   )
   .setShadow(false)
   .setHoverStateLineWidth(1)
);

例

*_HelloWorld.java_*

package com.finddevguides.client;

import org.moxieapps.gwt.highcharts.client.Axis;
import org.moxieapps.gwt.highcharts.client.BaseChart;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Color;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.plotOptions.AreaPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setZoomType(BaseChart.ZoomType.X)
         .setSpacingRight(20)
         .setChartTitleText("USD to EUR exchange rate from 2006 through 2008")
         .setChartSubtitleText("Click and drag in the plot area to zoom in")
         .setLegend(new Legend()
            .setEnabled(false))
         .setToolTip(new ToolTip()
            .setShared(true)
         )
         .setLegend(new Legend()
            .setEnabled(false)
         )
         .setAreaPlotOptions(new AreaPlotOptions()
            .setFillColor(new Color()
               .setLinearGradient(0, 0, 0, 1)
               .addColorStop(0, 69, 114, 167)
               .addColorStop(1, 2, 0, 0, 0)
            )
         .setMarker(new Marker()
            .setEnabled(false)
            .setHoverState(new Marker()
               .setEnabled(true)
               .setRadius(5)
            )
         )
         .setShadow(false)
            .setHoverStateLineWidth(1)
         );

      chart.getXAxis()
         .setType(Axis.Type.DATE_TIME)
         .setMaxZoom(14 *24* 3600000)//fourteen days
         .setAxisTitleText(null);

      chart.getYAxis()
         .setAxisTitleText("Exchange rate")
         .setMin(0.6)
         .setStartOnTick(false)
         .setShowFirstLabel(false);

      chart.addSeries(chart.createSeries()
         .setType(Series.Type.AREA)
         .setName("USD to EUR")
         .setPlotOptions(new AreaPlotOptions()
            .setPointInterval(24 *3600* 1000)
            .setPointStart(getTime("2006-01-01"))
         )
         .setPoints(new Number[] {
            0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232,
            0.7158, 0.714,  0.7119, 0.7129, 0.7129, 0.7049, 0.7095
         })
      );
      RootPanel.get().add(chart);
   }
   private static final DateTimeFormat dateTimeFormat = DateTimeFormat.getFormat("yyyy-MM-dd");
   private long getTime(String date) {
      return dateTimeFormat.parse(date).getTime();
   }
}

結果

結果を確認します。

時系列、ズーム可能なチャート