Day13 在图表做标记仿前朝的飘逸 就当我为highlight你伏笔

• Text marker and cursor marker

继昨天的cursor外，我们也常需要在图表上标记增进阅读性。今天结果的组合包如下，可以加水平线、垂直线、文字或区域上色。

我们可以参考这个影片说明，我们在图表的配置物件(config)中加上plugins属性(注意并不是在options中)，并具有我们要增加的变数的序列([pluginSet])：

const config = {
  type: "scatter",
  data: data,
  options: {
  },
  plugins: [pluginSet]
};

然後我们来定义这个要增加的变数，先以水平线为例：

const pluginSet = {
  id: 'pluginSet',
  beforeDraw(chart, args, options) {
    const {
      ctx, 
      chartArea: {top, bottom, right, left, height, width},
      scales: {x, y}
    } = chart;
    ctx.save(); 
    let x0, yo, dx, dy;
    // horizental line
    y0 = y.getPixelForValue(0.6);
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.strokeRect(left, y0, width, 0); //x0, y0, deltaX, deltaY
    ctx.restore();
  }
};

使用beforeDraw这个function来动作(beforeDraw和afterDraw会有压在资料图的下方还是盖在上方的差异)，然後我们可以看做固定起手式来读取图表的参数，接着以水平线为例，我们先设定水平线的特性，例如颜色(strokeStyle)，然後以strokeRect这个function画上线，而要输入的参数分别为起点的x值、y值以及宽度和高度，如果是以图表为基准可以用上方抓进来的top、bottom、right、left、width、height等参数，如果要以资料的区域可以用x或y的getPixelForValue这个function取得。最後再ctx.restore();收尾。
若是标记文字也是同样类似的方式，先设定文字相关参数，例如字型(font)，颜色(fillStyle)，这边要注意的是对齐方式(textAlign)，只有水平方向left、right和center三种可以选择，并无垂直方向，然後是以fillText标记上图表，这个function要输入三个参数分别为：文字内容，座标的X值和Y值，其中这个例子是搭配上面的水平线，所以我们调整Y值加上一半的字型大小让字体不会压在线上，而Y方向加是往下(反之减是往上)：

    // text
    const fontSize = 24;
    ctx.textAlign = 'left';
    ctx.font = `${fontSize}px Arial`;
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillText("Line at Y=0.6", left, y0 + fontSize / 2);
    ctx.restore();

区域上色也是同样，其中从这个例子可以看到区域是超出Y轴的，表示图表的X轴和Y轴范围并不会受此设定调整：

    //fill
    x0 = x.getPixelForValue(350);
    y0 = y.getPixelForValue(-0.9);
    dx = x.getPixelForValue(550) - x0;
    dy = y.getPixelForValue(0.9) - y0;
    ctx.fillStyle = RGBwithA(CHART_COLORS.red, 0.2);
    ctx.fillRect(x0, y0, dx, dy);
    ctx.restore();

另外我们在beforeDraw还有一个argument叫options，这可以让我们将这些标记的特性用options的属性设定，则我们可以在图表的配置物件(config)中的options，增加plugins，里面再增加这变数的名称，里面就可以设定这些属性。