1. 概述
1.1 版本
报表服务器版本 | 功能变动 |
---|---|
10.0.9 | 图例的形态属性删除,相关功能移到 图表系列 的颜色属性下 |
10.0.18 | 图例交互效果优化:显示策略中的「高亮」设置项变更为「固定显示」设置项。详情参见第 2.5.1 节 |
10.0.19 | 图例交互优化,解决图例与轴标签有重叠时图例难触发的问题 |
1.2 功能简介
「图例」显示的内容实际是由 图表系列>颜色 决定的,共有以下三种类型:
1)普通图例:可点击图例实现该系列的显示与隐藏。
2)连续渐变图例:可滑动上下圆点改变值的范围,图形对应的值在范围内时显示,在范围外时隐藏。
3)区域段图例:可点击区域段实现该区域段对应的图形的显示与隐藏。
注1:只有「地图、钻取地图、热力地图、气泡图、散点图、词云图」这 6 种图表的系列选择为「颜色划分>值」时可设置后两种图例,其他情况均为普通图例。
注2:框架图和仪表盘不支持设置图例。
注3:图表图例过多时,在移动端可能会出现显示不全的情况,点击图例空白处可以出现滚动条,拖动即可查看剩余图例。
2. 属性介绍
图例共有 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 解析文本内容 。