このチャートを描画するために使用される構成は、リンク：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章ですでに見ています。 時系列のズーム可能なチャートをさらに理解するために、次の例を考えてみましょう。
ここで、追加の構成/実行された手順について説明します。
チャートを構成してズーム可能にします。 chart.zoomType は、ユーザーがマウスをドラッグしてズームできる寸法を決定します。 これに可能な値は、x、y、またはxyです。
chart.setZoomType(BaseChart.ZoomType.X)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();
}
}結果を確認します。
