Annotation 教程

图形标注配置

图形标注，Annotation，作为 G2 图表的辅助元素，主要用于在图表上标识额外的标记注解。

image.png

图表标注类型

G2 提供了丰富的图形标注类型：

| | arc | 辅助弧线，只在极坐标系下生效。常用于绘制仪表盘。 image.png chart.annotation().arc({}) | | image | 辅助图片，在图表上添加辅助图片。 image.png chart.annotation().image({}) | | line | 辅助线（可带文本），例如表示平均值或者预期分布的直线。 image.png chart.annotation().line({}) | | text | 辅助文本，指定位置添加文本说明。 image.png chart.annotation().text({}) | | region | 辅助框，框选一段图区，设置背景、边框等。 image.png chart.annotation().region({}) | | regionFilter | 区域着色，将图表中位于矩形选区中的图形元素提取出来，重新着色。 image.png chart.annotation().regionFilter({}) | | dataMarker | 特殊数据点标注，多用于折线图和面积图。 image.png chart.annotation().dataMarker({}) | | dataRegion | 特殊数据区间标注，多用于折线图和面积图。 image.png chart.annotation().dataRegion({}) |

配置

各个标注类型的详细配置详见 API：

  • chart.annotation().arc(cfg): cfg 配置详见 API。
  • chart.annotation().line(cfg): cfg 配置详见 API。
  • chart.annotation().text(cfg): cfg 配置详见 API。
  • chart.annotation().image(cfg): cfg 配置详见 API。
  • chart.annotation().region(cfg): cfg 配置详见 API。
  • chart.annotation().dataMarker(cfg): cfg 配置详见 API。
  • chart.annotation().dataRegion(cfg): cfg 配置详见 API。
  • chart.annotation().regionFilter(cfg): cfg 配置详见 API。

清空图形标注

  • chart.annotation().clear() 清空所有的图形标注，但是不会清空配置，当用户再次调用 chart.render() 时，所有的 annotation 会重新绘制。
  • chart.annotation().clear(true) 清空所有的图形标注同时清空配置。

动态图形标注

G2 图形标注接受的位置信息的参数都是原始数据值，辅助标记一旦生成后就是固定了位置，如果数据发生改变，辅助标记就需要删除掉重新创建。

如果数据是动态更新的那么这个过程需要频繁进行，基于这种场景 Annotation 提供了如下两种解决方案：

  • 可以使用 ‘min’, ‘median’, ‘max’ 关键字，代表原始值的最小值、平均值、最大值，例如： [0, ‘min’] 表示 x 轴上数值为 0，y 轴位置在数值的最小值上；
  • 表示位置的数组可以换成回调函数，函数原型： function(xScale, yScales) {return [];}

xScale, yScales 分别对应 x 轴的度量和所有 y 轴的度量；

图形标注配置 - 图10

  1. const data = [];
  2. const time = Math.floor(new Date().getTime() / 1000) * 1000;
  4. for (let i = -19; i <= 0; i++) {
  5.   data.push({
  6.     time: time + i * 3 * 1000,
  7.     value: Math.random() + 0.25,
  8.   });
  9. }
  11. // 查找最大值
  12. function findMax() {
  13.   let maxValue = 0;
  14.   let maxObj = null;
  15.   data.forEach(obj => {
  16.     if (obj.value > maxValue) {
  17.       maxValue = obj.value;
  18.       maxObj = obj;
  19.     }
  20.   });
  21.   return maxObj;
  22. }
  24. const chart = new Chart({
  25.   // 创建图表
  26.   container: 'container',
  27.   autoFit: false,
  28.   width: 500,
  29.   height: 450,
  30. });
  31. chart.data(data.concat([]));
  32. chart.scale({
  33.   time: {
  34.     type: 'time',
  35.     mask: 'HH:mm:ss',
  36.   },
  37.   value: {
  38.     nice: true,
  39.   },
  40. });
  41. chart.animate(false);
  42. chart.line().position('time*value');
  44. chart.annotation().text({
  45.   position() {
  46.     const obj = findMax();
  47.     return [obj.time, obj.value];
  48.   },
  49.   content: '最大值',
  50. });
  52. chart.render();
  54. setInterval(function() {
  55.   data.shift();
  56.   data.push({
  57.     time: new Date().getTime(),
  58.     value: Math.random() + 0.25,
  59.   });
  60.   chart.changeData(data.concat([]));
  61. }, 3000);