charts - ChartJS 注释隐藏/显示

Question

我正在使用注释插件在我的图表中绘制水平线。有什么方法可以根据条件隐藏和显示注释吗？

我的代码:

annotation: {

   drawTime: 'afterDatasetsDraw',
   annotations: [{
      id: 'hline1',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 50,
      borderColor: 'red',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
       backgroundColor: "red",
         content: "Benchmark",
         enabled: true,
          position : "left"
      }
   }, {
      id: 'hline2',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 30,
      borderColor: 'green',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
        backgroundColor: "green",
         content: "Target",
         enabled: true,
          position : "left"
      }
   }]

},

Answer 1

另一种选择是根据您所需的条件，通过将绘图时间从“afterDatasetsDraw”切换为 null 来更新图表。

类似于:

function toggleAnnotation(chart) {
    if (chart.options.annotation.drawTime == "afterDatasetsDraw"){
        chart.options.annotation.drawTime = null;
     } else {
        chart.options.annotation.drawTime = "afterDatasetsDraw";
     }
     chart.update();
}