单击时更改 Chartjs 标签颜色而不会丢失悬停

Question

我将 vue-chart-js 与 labels plugin 一起用于圆环图。

当我点击甜甜圈部分时，该部分的背景颜色会正确更改。我也想为我单击的特定圆环图部分触发标签字体颜色更改。

这就是我如何触发圆环图选项的标签颜色更改：

   return {
    options: {
      events: ['click'],
      plugins: {
        labels: {
          render: 'label',
          fontColor: ['black', 'black', 'black'],
        },
      },
      onClick: (evt, item) => {
        // change font color for the section to red, changes the fontColor item in array above and trigger reactivity for the options prop in the donut chart component
        this.$set(this.doughnutChart.options.plugins.labels.fontColor, 0, 'red');
      },
    },
    chartData: {
      labels: ['A', 'B', 'C'],
      datasets: [
        {
          hoverBackgroundColor: 'red',
          data: this.chartData,
        },
      ],
    },

我使用 Vue-Chartjs 文档推荐的 destroy() 和重新渲染方法来更新图表组件

export default {
  extends: Doughnut,
  mixins: [mixins.reactiveProp],
  props: {
    chartData: {
      type: Object,
      default: null,
    },
    options: {
      type: Object,
      default: null,
    },
  },
  watch: {
    options: {
      handler() {
        this._data._chart.destroy();
        this.renderChart(this.chartData, this.options);
      },
      deep: true,
    },
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

如果我单击图表部分，标签会正确变为红色。但是图表重新呈现并丢失了单击切换的红色部分背景。如果我对图表使用 update() 方法，而不是销毁或重新渲染，则什么也不会发生。

有没有一种方法可以实现点击图表并更改部分背景及其标签而无需重新渲染图表或者点击时不会丢失部分背景颜色更改=

Answer 1

您可以使用update方法。参见 Updating Options。实际上 vue-chartjs 也将其用于 chartData.

On data mutation, it will call update() if the data inside the datasets has changed, or renderChart() if new datasets were added. [source]

示例代码：

import { Doughnut, mixins } from "vue-chartjs";
import "chartjs-plugin-labels";

export default {
  extends: Doughnut,
  mixins: [mixins.reactiveProp],
  props: ["options"],
  watch: {
    options: {
      handler() {
        let chart = this.$data._chart;
        chart.options = this.options;
        chart.update();
      },
      deep: true
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};

CodeSandbox

单击时更改 Chartjs 标签颜色而不会丢失悬停

Change Chartjs label color on click without losing hover

javascript

vue.js

chart.js

vue-chartjs