1

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

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

但是，当我们在chartjs-plugin-annotation插件中添加时，除非我们在本地定义配置并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)
 }

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

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

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

有什么想法吗？

4

1 回答 1

0

这个问题：Annotations are not display in Chart.js links to the solution

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

于 2021-01-25T12:01:45.597 回答