如何动态更改Chart.js中的注释值

Question

我正在使用chartjs-plugin-annotation和chartjs-plugin-draggable在我的chart.js项目中。当我更改一个注释的值，该注释绘制一条垂直线并尝试更新图表时，这条线的位置保持不变。但是我可以看到图表对象中正在更新的值。

Answer 1

如果有人还通过谷歌登陆这里:这是一个bug。作为解决办法，您可以从注释中删除ID，但这可能会破坏鼠标事件。更多信息，这里。

Answer 2

调用图表插件-通过传递要更改的参数，通过函数对更新的值进行注释。

Answer 3

这就是对我有用的东西。我使用一个单独的函数来设置新的值和文本标签，然后调用chart.update()方法。对我来说很好。关于更新图表及其选项，请参见chart.js文档。

options: { // chart.js options object

...

annotation: {
              annotations: [
                {
                  type: 'line',
                  mode: 'horizontal',
                  scaleID: 'y-percent',
                  value: 0,
                  borderColor: 'rgba(238, 68, 226,0.2)',
                  borderWidth: 2,
                  borderDash: [5,5],
                  label: {
                    enabled: true,
                    content: 'Your text label ',
                    position: 'end',
                    drawTime: 'afterDatasetsDraw',
                    backgroundColor: 'rgba(238, 68, 226,0.4)'
                  }
              },
              
          
              ]
            }, // annotation
} // options

setAnnotationValue(val){
      chart.options.annotation.annotations[0].value = val; // set the Value
      chart.options.annotation.annotations[0].label.content += " "+ val + "%"; // append the value to the label (if applicable)
      chart.update(); // and finally update the chart.
    },