向vue-chart-js添加chart插件

Question

我正在尝试将一个名为chartjs- plugin -annotation (https://github.com/chartjs/chartjs-plugin-annotation)的chartjs插件添加到我的vue-chartjs项目中。在我的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>

在呈现图表之前，我在mounted() 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);
  }