ChartJS Annotation插件：如何按条件隐藏/显示注释？

当然可以！Chart.js的Annotation插件完全支持根据条件控制注释的显示与隐藏，我给你两种实用的实现方案，结合你的代码示例来讲解：

方案1：初始化时根据条件配置注释 #

在定义图表的annotations数组时，直接通过条件判断决定是否包含对应的注释对象。这种方式适合在图表加载前就确定显示状态的场景。

比如你可以这样写：

// 替换成你的实际条件逻辑，比如从后端获取或者用户交互状态
const shouldShowBenchmarkLine = true; 
const shouldShowSecondLine = false;

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line', // 你的图表类型，比如折线图
  data: { /* 你的数据配置 */ },
  options: {
    scales: { /* 你的坐标轴配置 */ },
    annotation: {
      drawTime: 'afterDatasetsDraw',
      annotations: [
        // 用扩展运算符+三元表达式，条件满足则添加该注释
        ...(shouldShowBenchmarkLine ? [{
          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"
          }
        }] : []),
        // 同理处理第二条水平线
        ...(shouldShowSecondLine ? [{
          id: 'hline2',
          type: 'line',
          mode: 'horizontal',
          scaleID: 'y-axis-0', // 补全你的坐标轴ID
          value: 40, // 替换成你的实际数值
          borderColor: 'blue',
          borderWidth: 1
          // 其他配置...
        }] : [])
      ]
    }
  }
});

方案2：运行时动态切换注释显示状态 #

如果需要在图表加载完成后，根据用户操作、数据变化等动态控制显示/隐藏，你可以通过修改注释的display属性，再调用图表的update()方法生效。

示例代码：

// 假设这是你的图表实例
const myChart = new Chart(/* 初始化参数 */);

// 定义一个切换注释的函数，传入你的条件
function toggleHorizontalLines(showBenchmark) {
  // 找到ID为hline1的注释
  const benchmarkLine = myChart.options.annotation.annotations.find(anno => anno.id === 'hline1');
  if (benchmarkLine) {
    // 根据条件设置display：true显示，false隐藏
    benchmarkLine.display = showBenchmark;
  }

  // 处理第二条水平线
  const secondLine = myChart.options.annotation.annotations.find(anno => anno.id === 'hline2');
  if (secondLine) {
    secondLine.display = !showBenchmark; // 举例：显示基准线时隐藏第二条线
  }

  // 更新图表使配置生效
  myChart.update();
}

// 调用示例：比如用户点击按钮时触发
// toggleHorizontalLines(true); // 显示基准线，隐藏第二条线
// toggleHorizontalLines(false); // 隐藏基准线，显示第二条线

关键说明 #

Annotation插件的每个注释对象都支持display属性，默认值为true（显示），将其设置为false即可隐藏对应的注释。无论是初始化时配置还是运行时修改，都是围绕这个属性来实现条件控制的。

内容的提问来源于stack exchange，提问作者monu