1. WIKI教程
2. 学习GWT_highcharts
3. 时间序列，可缩放(Time series, zoomable)

时间序列，可缩放(Time series, zoomable)

我们已经在Highcharts Configuration Syntax一章中看到了用于绘制此图表的配置 。 现在让我们考虑以下示例来进一步理解时间序列，Zoomable Chart。

配置 (Configurations)

现在让我们讨论所采取的其他配置/步骤。

图表

配置图表以使其可缩放。 chart.zoomType通过拖动鼠标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)  
);  

例子 (Example)

HelloWorld.java

package com.iowiki.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();  
   }  
}

结果 (Result)

验证结果。