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

我正在使用vue图表js作为甜甜圈图表

当我点击一个甜甜圈区域时，该区域的背景颜色会正确变化。我想为我单击的特定甜甜圈图表部分触发标签字体颜色更改

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

   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（）

方法，而不是销毁或重新渲染，则不会发生任何事情

---

是否有一种方法可以实现单击图表并更改章节背景及其标签，而无需重新渲染图表或在单击时不丢失章节背景颜色更改=

您可以使用

更新

方法。看见实际上，

vue chartjs

也将其用于

chartData

在数据突变时，如果数据集中的数据发生了更改，它将调用update（），如果添加了新的数据集，它将调用renderChart（）。[]

示例代码：

从“vue chartjs”导入{Doughnut，mixins}；
导入“chartjs插件标签”；
导出默认值{
扩展：甜甜圈，
mixins:[mixins.reactiveProp]，
道具：[“选项”]，
观察：{
选项：{
handler（）{
让chart=这个。$data.\u chart；
chart.options=this.options；
chart.update（）；
},
深：是的
}
},
安装的（）{
this.renderChart（this.chartData，this.options）；
}
};

---

codepen示例很容易调试，我只是错误地使用了

update（）

方法。谢谢