Chart.js Vue.js 中的注释在 data () 中定义时中断

Question

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

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

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

这是我们使用注释的基本模型

  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)
 }

一个完整的例子 fiddle 是 here

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

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

有什么想法吗？

Answer 1

这个问题：链接到解决方案

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

Chart.js Vue.js 中的注释在 data () 中定义时中断

Chart.js annotations in Vue.js break when defined in data ()

javascript

vue.js

charts

chart.js

chartjs-plugin-annotation