[英]Change Chartjs label color on click without losing hover
I'm using vue-chart-js with the labels plugin for a donut chart.我将 vue-chart-js 与标签插件一起用于圆环图。
When I click on a donut section, the section background color changes correctly.当我单击甜甜圈部分时,该部分的背景颜色会正确更改。 I want to trigger a label font color change for the specific donut chart section I clicked as well.
我还想为我单击的特定圆环图部分触发标签字体颜色更改。
This is how I trigger a label color change for the donut chart options:这就是我为圆环图选项触发标签颜色更改的方式:
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,
},
],
},
I use the recommended destroy()
and re-render methods by the Vue-Chartjs docs to update the chart component我使用 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);
},
};
If I click on a chart section, the label is correctly turned red.如果我点击图表部分,标签会正确地变成红色。 But the chart re-renders and loses the red section background that the click toggled.
但是图表会重新渲染并丢失单击切换的红色部分背景。 If I use the
update()
method for the chart, instead of destroying or re-rendering, nothing happens.如果我对图表使用
update()
方法,而不是销毁或重新渲染,则不会发生任何事情。
Is there a way to achieve clicking on the chart and change the section background and its label without having to re-render the chart OR not losing the section background color change on click=有没有办法实现点击图表并更改部分背景及其标签而不必重新渲染图表或不会丢失点击时的部分背景颜色更改=
You can use update
method.您可以使用
update
方法。 See Updating Options .请参阅更新选项。 And actually
vue-chartjs
also use that for chartData
.实际上
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.
在数据突变时,如果数据集中的数据发生变化,它将调用 update(),如果添加了新数据集,它将调用 renderChart()。 [ source ]
[来源]
Example code:示例代码:
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);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.