折线图

1.1 版本

1.2 应用场景

折线图是将值标注成点，并通过线将这些点按照顺序连接起来形成的图形。

折线统计图常用于显示随时间或有序类别变化的趋势，可以显示数据点以表示单个数据值，也可以不显示这些数据点。在有很多数据点并且它们的显示顺序很重要时，折线图尤其有用。

1.3 图表特点

不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况。

2.1 准备数据

点击设计器左上角「文件>新建普通报表」，新建内置数据集「本年空调月销量统计」，如下图所示：

2.2 设计报表

2.2.1 选择主题

点击报表上方的主题名称，弹出 主题选择 界面，选择「清爽科技」主题。如下图所示：

2.2.2 插入图表

合并一片单元格区域，点击上方工具栏插入图表按钮，插入「折线图」。如下图所示：

2.3 设计折线图

选中图表，点击右侧属性面板「单元格元素」，可设置图表的各个属性：类型、数据、样式、特效。

2.3.1 图表类型

选中图表所在单元格，点击右侧「单元格元素>类型」可查看和选择图表类型。

2.3.2 绑定数据

绑定折线图的数据如下图所示：

2.3.3 设置样式

1）选择「样式>标题」，设置标题文本为「本年空调月销量统计」，其余设置保存默认。如下图所示：

2）选择「样式>图例」，取消勾选「图例可见」。

3）选择「样式>系列」，可设置折线图的颜色、线型、标记点等样式。

• 线的形态有 3 种：普通、垂直、曲线。

• 空值断开：默认开启，即当某个分类没有值时，该分类两侧的值不连接。

• 标记点的点样式分为常规和自定义两种：点样式为常规时，可选择不同的类型，以及设置点的填充颜色和半径；点样式为自定义时，可使用图片作为标记点，并且自定义图片的大小。

注：标记点描边或空心颜色取自图表背景，取不到时浅色主题下默认为 #FFFFFF，深色主题下默认为 #000000。

本文示例具体设置如下图所示：

2.4 效果预览

2.4.1 PC 端

保存报表，点击「分页预览」，效果如 1.1 节效果图所示。

2.4.2 移动端

App 端和 HTML5 端均支持，效果如下图所示：

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\LineChart\折线图.cpt

点击下载模板：折线图.cpt

4.1 标记点颜色获取

问题描述

折线图标记点默认显示时，标记点外围存在白圈显示，但有时我们需要取消显示白色外圈，该怎么做呢。效果如下图所示：

原因分析

标记点描边或空心颜色取自图表背景，默认跟随主题，浅色主题下默认为 #FFFFFF，深色主题下默认为 #000000。如下图所示：

解决方案

给「图表区」背景设置任意一个填充颜色，再将不透明度设置为 0 即可。如下图所示：