Vue.js 中的 Chart.js 注释在数据中定义时中断（）

Question

我在 Vue.js 应用程序中使用chartjs-plugin-annotations时遇到了问题

一段时间以来，我们已经成功地将 ChartJS 图表嵌入到我们的 Vue 应用程序中，图表的config在组件的data ()部分中定义。

但是，当我们在chartjs-plugin-annotation插件中添加时，除非我们在本地定义配置并直接返回new Chart ，否则我们无法使注释正常工作。 这显然会导致更新图表出现问题。

这是我们与注释一起使用的基本 model

  async setChart (ctx) {
   const config = {
     type: 'bar',
     data: {},
       ..      
   }
   // populate the dateset for the chart
   await this.setChartData(config)
   // populate the annotations for the chart
   await this.setAnnotations(config)
   // create the chart
   return new Chart(ctx, config)
 }

一个完整的例子小提琴是here

当我们静态使用图表时，这很好（或至少有效），但是我们至少有一个页面，我们需要根据页面上的选择来更改图表。 在这种情况下， new Chart正在呈现新数据，但也保留旧图表。 然后浏览器在鼠标悬停时在图表之间滑动。 这可以在上面的示例中看到。

理想情况下，我们应该在这种情况下使用 chartJS 的update()方法，但是由于我们没有将图表分配给全局，因此在创建后我们无法访问它

有什么想法吗？

Answer 1

这个问题： Annotations are not display in Chart.js链接到解决方案

注释和 Chart.js 2.9.4 有问题，解决方法是降级到 Chart.js 2.9.3