时间序列 可缩放(Time series, zoomable)
优质
小牛编辑
119浏览
2023-12-01
我们已经在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 cn.xnip.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)
验证结果。
![时间序列,Zoomable图表](https://imgs.xnip.cn/cj/docimg/708/1c66f1c5-2979-4ec8-9685-6fa772cbcc3c.jpg)