Html5图表工具FineReport：[12]折线图

1、准备数据

新建工作薄，添加内置数据集ds1，数据如下：

2、 插入折线图

选择插入>悬浮元素>插入图表，弹出图表向导对话框，选择折线图。

点击确定，选中图表，选择图表属性表-数据，图表来源来自内置数据集，设置如下：

3、 交互属性设置

查看图表时，鼠标移到图表上能够有提示，这个可以通过图表交互来实现。选中折线图，点击图表属性表-特效>交互属性，设置数据点提示及坐标轴交互，如下图：

4、 样式设置

最后我们可以给图表设置样式，使得图表更加专业。

点击图表属性表-样式>区域>绘图区，勾选掉网格线属性下的横向，将横向网格线的线型设为无；

分类轴是日期时间，可以分类轴的数字改为时间类型，并设置格式为hh:mm；

已完成模板，可参见%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\LineChart.cpt。在线查看模板效果请点击LineChart.cpt