注释不显示在 vue-chartjs 中答案

【问题标题】：Annotation don't show in vue-chartjs注释不显示在 vue-chartjs 中
【发布时间】：2020-11-17 15:42:22
【问题描述】：

我正在使用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,
                }
              }
          ]
  },
}

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

【问题讨论】：

标签： javascript chart.js vue-chartjs

【解决方案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" 
}

它适合我。

【讨论】：

使用 "chart.js": "2.9.3" 而不是 "chart.js": "^2.9.3"

【解决方案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 的道具或成员），这意味着 its 属性都是使用Object.defineProperty() 设置的（由 Vue，在后台）。这就是为什么这很重要：

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

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

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

【讨论】：