【问题标题】: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" 而不是 "c​​hart.js": "^2.9.3"
    【解决方案2】:

    我看到的一个问题是您在plugins 下定义了annotation,而它应该在options直接定义。 (我知道这很令人困惑,因为一些 chartjs-annotation-plugin 文档仍然显示了一个示例,其中 annotationplugins 而不是 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

    【讨论】:

      猜你喜欢
      • 2018-09-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-17
      相关资源
      最近更新 更多