Annotation

4 min read

定义

image.png

“辅助标记”指为帮助浏览者阅读图表更易理解图表信息,而添加的对图表整体或者部分元素的注解信息。

何时使用

辅助标记在以下两种场景可帮助用户理解图表:

  1. 对于无分析经验或时间较少的用户,直接获取有用的信息。例:有分析经验的用户手动标注异常或重要的数据
  2. 对于通过可视分析获取洞见的用户,提升分析效率。例:系统智能高亮波动并分析原因

常见类型

单一数据注解

image.png

区间数据注解:对某一区间范围(时间、数据、对象等)做注解

image.png

数据对比注解:统计指标、值域区间、辅助区间

image.png

多数据指定区域注解

image.png

多数据批量注解

image.png

构成元素

辅助标记的可选元素包括:文本,拉线,数据点,区间,辅助线,标记点

用户可针对不同的标记内容,选取不同的元素

image.png

注意:当无法避免与其他组件碰撞时,保持注解内容位于其他组件最上层

文本

设计建议

  1. 在空间的允许下,尽可能显示文本,直观表达标注内容。如果不显示文本需显示 icon,用户可通过点击查看
  2. 当文本内容宽度大于等于图表宽度 1/2 时,隐藏文本显示文本 icon
  3. 文本内容较多时,需设定最大宽度(例:10 个字符),超出显示「...」,用户可通过 hover 查看全部

image.png

拉线

设计建议

  1. 通常建议加上拉线来加强标注与图表的关联
  2. 默认方向与值域趋势方向一致,方向视空间而定。建议:上 > 下 > 延长 > 折角 > 隐藏

image.png

数据点

设计建议

  1. 在单一数据注解或多数据统一注解的场景,建议加上数据点,以突出标注的数据
  2. 样式上建议区分已标注与未标注

image.png

区间

设计建议

  1. 对某一区域/范围做批注时,建议显示区间。区间底色需与图形样式做区分
  2. 区间的使用不宜重叠,且区间面积不宜过多,避免干扰用户阅读图表信息

辅助线

设计建议

  1. 辅助线的样式需与图表样式做区分,且辅助线的数目不宜过多
  2. 辅助线需配合文本表达含义

标记点

设计建议

  1. 在对多数据做批量批注时,建议在文本附近显示标记点作为提示