Question

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

Answer 1

万一有人通过谷歌搜索仍然落在这里：这是一个错误。作为一种解决方法，您可以从注释中删除ID，但这可能会中断鼠标事件。更多信息here。

Answer 2

通过传递要更改的参数，通过函数调用chart-plugin-annotation更新值。

Answer 3

这对我有用。我使用单独的函数来设置新值和文本标签，然后调用 chart.update() 方法。对我来说很好用。有关更新图表及其选项的信息，请参阅 chart.js documentation。

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.
    },

如何动态更改Chart.js

3 个答案: