GWT Highcharts-折线图介绍

GWT Highcharts是一套基于Java语言的高交互性图表组件库，可以为你的应用程序提供多种类型的图表和图形，其中包括折线图、柱状图、饼图等等，本文将会介绍GWT Highcharts中的折线图。

什么是折线图

折线图是一种以折线所连结的数据点来显示数据的图表，在水平轴上以等距的刻度来标识数据点所代表的值，通常用于显示数值的变化趋势，折线图在数据分析和数据挖掘领域非常常用。

GWT Highcharts 折线图的使用

1. 引入GWT Highcharts

<script language="javascript" src="https://code.highcharts.com/highcharts.src.js"></script>
<script language="javascript" src="https://code.highcharts.com/modules/exporting.js"></script>

2. 创建折线图

import com.github.highcharts4gwt.client.model.Chart;
import com.github.highcharts4gwt.client.model.Series;
import com.github.highcharts4gwt.client.model.XAxis;
import com.github.highcharts4gwt.client.model.YAxis;

Chart chart = createChart();

XAxis xAxis = createXAxis();

YAxis yAxis = createYAxis();

Series series = createSerise();

chart.setxAxis(xAxis);

chart.setyAxis(yAxis);

chart.setSeries(series);

3. 设置折线图参数

xAxis.setTitle("日期");

yAxis.setTitle("价格");

series.setName("股票价格");

List< ? extends Number > data = Arrays.asList(29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);

series.setData(data);

4. 把折线图放到页面中

DrawingArea drawingArea = new DrawingArea(800, 600);

HighchartsWidget highchartsWidget = new HighchartsWidget();

highchartsWidget.setChart(chart);

drawingArea.add(highchartsWidget);

RootPanel.get().add(drawingArea);

总结

以上就是GWT Highcharts折线图的基本使用方法和逻辑，当然也有很多高级功能如动态交互、鼠标事件等，有兴趣的读者可以前往官方文档了解更多。