图表图例

1.1 版本

1.2 功能简介

「图例」显示的内容实际是由 图表系列>颜色 决定的，共有以下三种类型：

1）普通图例：可点击图例实现该系列的显示与隐藏。

2）连续渐变图例：可滑动上下圆点改变值的范围，图形对应的值在范围内时显示，在范围外时隐藏。

3）区域段图例：可点击区域段实现该区域段对应的图形的显示与隐藏。

注1：只有「地图、钻取地图、热力地图、气泡图、散点图、词云图」这 6 种图表的系列选择为「颜色划分>值」时可设置后两种图例，其他情况均为普通图例。

注2：框架图和仪表盘不支持设置图例。

注3：图表图例过多时，在移动端可能会出现显示不全的情况，点击图例空白处可以出现滚动条，拖动即可查看剩余图例。

图例共有 5 个通用属性，分别是：布局、样式、边框、背景、显示策略。当图表为「地图、钻取地图、热力地图、气泡图、散点图、词云图」且设置 图表系列颜色划分 为「值」时，图例会显示「格式」属性。下面为大家分别介绍。

2.1 布局

图例显示位置设置，共有六个设置选项，分别是：靠上，靠下，靠左，靠右，右上、自定义悬浮位置，默认为靠右显示。

1）靠上，靠下

位置选择「靠上、靠下」时，会显示「排列」选项：流式、对齐，默认为对齐。

当图表的图例较多时，流式布局和对齐布局的效果分别如下所示：

2）靠左、靠右、右上

位置选择「靠左、靠右、右上」时，无排列选项。如下图所示：

3）自定义悬浮位置

通过输入 x 方向和 y 方向的值来控制图例的位置。

详细介绍和示例参见文档：自定义图表标题和图例的位置 。

2.2 样式

用于设置图例标签文字的字体、颜色、字号，默认跟随主题，可根据具体需求自定义。

注：如果浏览器设置了最小字体，而模板图表中设置的最小字体小于浏览器的最小字体，那么以浏览器为准。

比如说 Chrome 浏览器的最小字体为 12 号，图表设置的字体大小为 10 号，在 Chrome 下查看报表时，图表字体显示为 12 号，而非 10 号，故此时需要修改浏览器字体大小。

2.3 边框

可设置整个图例部分的边框，默认为无边框。设置项如下：

• 线型：图例边框采用哪种线型，默认为无。

• 颜色：图例边框所使用的颜色。

• 圆角：图例边框四个角的圆角度数设置，默认为 0 px。

2.4 背景

可设置整个图例部分的背景，默认没有背景。设置项如下：

• 填充：可下拉选择没有背景、颜色、渐变色，默认为没有背景。

• 不透明度：设置背景的透明效果，默认不透明度为 100% 。

• 阴影：设置图表背景是否开启阴影效果，默认为关闭。

2.5 显示策略

可设置图例在整个图表的所占的区域大小，以及图例在预览时的交互效果。

1）区域大小：可对图例显示区域的大小进行控制，可选择「自动」和「自定义」，默认为「自动」即不限制大小。

注：图例的布局设置为自定义悬浮位置时，区域大小灰化不可设置。

2）固定显示：开启与不开启固定显示的交互效果不同，默认为勾选开启固定显示。

注：不支持多层饼图、热力地图及系列颜色「连续渐变」形态下图表，系列颜色为「区域渐变」时，固定显示效果和 2.5.1 节普通图例效果一致。

2.5.1 交互效果

1）未开启固定显示

初次点击图例文字或图标，该图例隐藏，再次点击后显示。效果如下图所示：

2）开启固定显示

• 当图例显示时，将鼠标悬浮在图例上时，图例图标变为「固钉」样式 （颜色跟随系列色），且当鼠标悬浮在图例图标上时，该图例高亮，高亮的图例对应的系列不透明度为 100%，其余系列不透明度为 30%。

• 图例显示时，点击图例文字，该图例隐藏，隐藏后点击图例文字或图标则再次显示；

• 图例显示时，点击  后图标变为  ，此时只显示该图例，其他图例隐藏；点击被隐藏的图例，可再次显示。当只有一个系列显示时，点击  后，所有系列显示。

2.6 格式

当图表为地图、钻取地图、热力地图、气泡图、散点图、词云图时，设置 图表系列颜色划分 为「值」时，图例会显示「格式」设置项。

1）标签格式为「通用」时，图例显示格式随下拉框中所选设置改变，效果如下图所示：

2）标签格式为「自定义」时，可通过输入 JavaScript 代码，使用 HTML 解析文本内容，实现图例自定义格式。详情可参见：图表使用 HTML 解析文本内容 。