Chart.js 3.7.1中如何动态更新annotation插件的注解值？

你动态修改注解不生效有两个核心原因：

• 你新增注解时是用字符串键newAnnotation给annotations对象挂载属性，注解不是按数组顺序存储的，用数组下标[0]根本匹配不到你创建的这条注解
• 你尝试修改的value属性不是line类型注解的合法配置项，line类型的水平线位置由yMin和yMax控制，垂直线位置由xMin和xMax控制，不存在单独的value字段。

直接用你创建注解时自定义的键名访问对应注解对象，修改合法配置项后调用图表的update()方法即可生效，示例代码如下：

// 访问键名为newAnnotation的注解，修改水平线位置到300000
myChart.options.plugins.annotation.annotations['newAnnotation'].yMin = 300000
myChart.options.plugins.annotation.annotations['newAnnotation'].yMax = 300000
// 触发图表重绘，修改才会展示
myChart.update()

如果你当初是用数组push的方式新增注解，才可以用数组下标访问，示例：

// 数组追加方式新增注解
myChart.options.plugins.annotation.annotations.push({
  type: 'line',
  xMin: 0,
  xMax: 11,
  yMin: 200000,
  yMax: 200000,
  borderColor: 'rgb(255, 99, 132)',
  borderWidth: 2
})
myChart.update()

// 这种情况可以用下标访问修改
myChart.options.plugins.annotation.annotations[0].yMin = 300000
myChart.options.plugins.annotation.annotations[0].yMax = 300000
myChart.update()

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