注释不会在vue-chartjs中显示

Question

我使用的是vue-chartjs。我的图表中需要注解。我导入了一个注释插件

import chartjsPluginAnnotation from "chartjs-plugin-annotation"

然后在已安装的插件上添加一个插件

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

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

然而，还有一个问题似乎确实源于Chart.js 2.9.4中所做的更改。The method of cloning an object was modified，因此它现在利用Object.create()，它将属性从源对象复制到目标对象的原型中。在Vue应用程序的上下文中，问题是您传递给renderChart()方法的options很可能是Vue观察者(例如，一个道具或data的成员)，这意味着它的属性都是使用Object.defineProperty()设置的(由Vue在幕后)。这就是为什么这很重要：

将属性设置为对象的

将创建自己的属性。获取和设置行为规则的唯一例外是当存在带有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 (普通旧式Javascript对象)中，例如，使用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