注释不显示在 vue-chartjs 中

Question

我正在使用vue-chartjs. 我需要在图表中添加注释。我导入了一个注释插件

import chartjsPluginAnnotation from "chartjs-plugin-annotation"

然后在mounted上添加一个插件

this.addPlugin(chartjsPluginAnnotation)

另外，我在选项中添加了一个注释对象

plugins: {
  annotation: {
          drawTime: 'afterDraw',
            annotations: [
              {
                type: "line",
                id: 'BTV',
                mode: "horizontal",
                display: true,
                scaleID: "y-axis-0",
                borderColor: "red",
                value: 17000,
                borderDash: 4,
                label: {
                  content: 'aa',
                  enabled: true,
                  position: "top",
                  xAdjust: 15,
                  backgroundColor: '#4ecca3',
                  fontSize: 10,
                }
              }
          ]
  },
}

它适用于我找到的所有手册，但不适用于我的项目

Answer 1

如果您使用的是“chart.js” v2.9.4（最新），只需将其降级到 v2.9.3 。也许他们在那个版本上有一些问题。

请在下面检查我的“package.json”。

"dependencies": {
  "chart.js": "^2.9.3",
  "chartjs-plugin-annotation": "^0.5.7",
  "vue": "^2.6.11",
  "vue-chartjs": "^3.5.1" 
}

它适合我。

Answer 2

我看到的一个问题是您已经annotation在下定义，plugins而它应该直接在options. （我知道这很令人困惑，因为一些 chartjs-annotation-plugin 文档仍然显示了一个示例，annotation其属性为 ofplugins而不是options。）

然而，还有另一个问题似乎源于 Chart.js 2.9.4 中所做的更改。克隆对象的方法已修改，现在可以使用Object.create()，将源对象的属性复制到目标对象的原型中。问题是，在 Vue 应用程序的上下文中options，您传递给renderChart()方法的 很可能是 Vue 观察者（例如，prop 或 的成员data），这意味着它的属性都已设置（由 Vue，在引擎盖）使用Object.defineProperty()。这就是为什么这很重要：

为对象设置属性会创建自己的属性。获取和设置行为规则的唯一例外是当存在带有 getter 或 setter 的继承属性时。

（来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain）

这是一个问题的原因是，当 Chart.js 初始化图表时，它通过递归地将配置选项与一堆全局默认值合并来创建选项；如果属性是非标准选项，则此合并行为的一部分涉及上述克隆，这将使您的annotation对象的属性复制到其原型，但没有自己的属性。因此，当注解插件初始化时，它会找到一个注解对象，但它没有自己的任何属性，并且当注解插件初始化其配置时，它将您的annotation对象与其默认值合并- 其中包括一个空annotations数组。

在我看来，那降级chart.js之于2.9.3应为你工作，只要你同时将你annotation从财产plugins直接下options。另一种选择——如果你想继续使用最新版本的 Chart.js——是确保你传递给renderChart()方法的选项是非反应性的（即，不是 Vue 观察者）。实现这一点的一种方法是将反应annotation对象的属性复制到 POJO（Plain Old Javascript Object）中，例如，通过使用Object.assign()：

this.renderChart(this.chartData, { 
  ...this.options, 
  annotation: Object.assign({}, this.options.annotation) 
})

我在 Chart.js GitHub 上提交了一个问题：https : //github.com/chartjs/Chart.js/issues/8382