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

如何解决将chart-js插件添加到vue-chart-js

我正在尝试将一个名为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)中填写什么？我还缺少什么？ 我事先表示歉意，因为我真的是这个框架的新手。

解决方法

这是您的options对象的外观：

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

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

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

// in mounted
this.addPlugin(SomePlugin);

,

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);
  }