Question

我们需要在vue-chart上附加一个自定义插件。请指导我们如何在同一平台上实施

import { Line, mixins } from 'vue-chartjs'
export default {
    namespaced: true,
    extends: Line,
    props: ['chartData', 'options'],
    mounted() {
        this.renderChart(this.chartData, this.chartData.options)
    }
}

这就是我们使用Vue图表的折线图的方式。如何在此处附加插件

https://blog.larapulse.com/javascript/creating-chart-js-plugins 我们想尝试一下。但是由于我们正在使用内部使用chart.js的vue-chart。需要一些帮助来附加插件。请指导我们

我想在图表中为图表中的一个特定列应用一些背景颜色

Answer 1

以annotation plugin for Chart.js为例，您可以使用addPlugin function附加它：

import { Line, mixins } from 'vue-chartjs'
import chartjsPluginAnnotation from "chartjs-plugin-annotation"

export default {
    namespaced: true,
    extends: Line,
    props: ['chartData', 'options'],
    mounted() {
        //Arguments is an Array of Plugins (https://vue-chartjs.org/api/#addplugin)
        this.addPlugin([chartjsPluginAnnotation]),
        this.renderChart(this.chartData, this.chartData.options)
    }
}

此后，只需照常在组件上传递插件的选项即可。在这种情况下，如果您想画一条垂直线，将是这样的：

   computed: {
        chart() {
          return {
            chartData: {
              labels: this.data.labels,
              datasets: [
                {
                  label: "Score",
                  data: this.data.data
                }
              ],
            options: {
              annotation: {
                annotations: [
                  {
                    type: "line",
                    mode: "vertical",
                    scaleID: "x-axis-0",
                    borderColor: "#4ecca3",
                    value: parseInt(this.data.line),
                    borderDash: [4, 4],
                    label: {
                      content: this.data.line,
                      enabled: true,
                      position: "top",
                      xAdjust: 15,
                      backgroundColor: '#4ecca3',
                      fontSize: 10,
                    }
                  }
                ]
              }
            },
            }
          };
        }

Answer 2

vue-chart-js提供了附加插件的方法。使用这种方式：

导入插件

import ChartDataLabels from 'chartjs-plugin-datalabels';

然后，调用已安装的addPlugin

 mounted() {
    this.addPlugin(ChartDataLabels);
    this.renderChart(
      this.chartData,
      this.options,
    );
 }

下面是PieChart.vue脚本，以防您创建饼图：

<script>
import { Pie, mixins } from 'vue-chartjs';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.plugins.unregister(ChartDataLabels);

const { reactiveProp } = mixins;

export default {
  extends: Pie,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: null,
    },
  },

  mounted() {
    this.addPlugin(ChartDataLabels);
    this.renderChart(
      this.chartData,
      this.options,
    );
  },
};
</script>

Answer 3

import chartjsPluginAnnotation from "chartjs-plugin-annotation";

还有：

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

将自定义插件附加到Vue-Chart

3 个答案: