Question

我正在尝试将一个名为chartjs-plugin-annotation（https://github.com/chartjs/chartjs-plugin-annotation）的chartjs插件添加到我的vue-chart js项目中。在我的BarChart.vue文件中，我首先导入了chartjs注释插件

<script>
import { Bar, mixins } from "vue-chartjs";
import chartjsPluginAnnotation from "chartjs-plugin-annotation";
const { reactiveProp } = mixins;

export default {
  extends: Bar,
  mixins: [reactiveProp],
  plugins: {
    annotation: {
      drawTime: "afterDatasetsDraw",
      events: ["click"],
      dblClickSpeed: 350,
      annotations: [
        {
          drawTime: "afterDraw",
          id: "a-line-1",
          type: "line",
          mode: "horizontal",
          scaleID: "y-axis-0",
          value: "25",
          borderColor: "red",
          borderWidth: 2,
          onClick: function (e) {
            // `this` is bound to the annotation element
          },
        },
      ],
    },
  },
  props: {
    options: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    // add plugin
    this.addPlugin([chartjsPluginAnnotation]);
    this.renderChart(this.chartData, this.options);
  },
  watch: {
    options() {
      this.renderChart(this.chartData, this.options);
    },
  },
};
</script>

在渲染图表之前，我将插件添加到mount（）this.addPlugin([chartjsPluginAnnotation]);下。我是否可以像plugins :一样将配置选项正确地添加到图表中？

我已经使用npm install chartjs-plugin-annotation --save成功安装了插件。我在本地刷新了我的应用程序，但图表上没有添加注释插件。我应该在onClick: function (e)中填写什么？我还缺少什么？我事先表示歉意，因为我真的是这个框架的新手。

Answer 1

这是您的options对象的外观：

{
  ...
  annotation: {
    annotations: [
      {<your annotation object code here>}
    ],
  },
  ...
}

接下来，您已经正确确定应使用addPluing()方法，只需确保像这样使用它即可。

// in imports
import SomePlugin from "..."

// in mounted
this.addPlugin(SomePlugin);

Answer 2

https://stackoverflow.com/a/65486537/7165219

import chartjsPluginAnnotation from "chartjs-plugin-annotation";

还有：

  mounted() {
    Chart.plugins.register(chartjsPluginAnnotation);
    this.addPlugin(chartjsPluginAnnotation);
    this.renderChart(this.chartData, this.options);
  }

将chart-js插件添加到vue-chart-js

2 个答案: