Javascript Vue Chart.js-使极坐标图在悬停时更改颜色

我想做以下几点：

当在图表上盘旋时，我希望它淡出一点；当我将鼠标悬停在其中一个零件上时，我希望该零件返回到其正常颜色。到目前为止，我有以下代码：

我的组成部分：

<script>
    import {PolarArea} from 'vue-chartjs';
    export default {
        extends: PolarArea,
        props: ['chartdata', 'options'],
        mounted() {
            this.renderChart(this.chartdata, this.options)
        }
    }
</script>

<style>
</style>

<PolarAreaChart chartId="polar-chart-quiz" ref="areaChart" :chartdata="quiz.polarChartData" :options="polarChartOptions" />

polarChartData: {
                    datasets: [
                        {
                            data: [],
                            backgroundColor: function(context) {
                             let centerX = context.chart.width / 2;
                             let centerY = context.chart.height / 2;
                             let r1 = context.chart.innerRadius;
                             let r2 = context.chart.outerRadius;
                             let gradient = context.chart.ctx.createRadialGradient(centerX, 
                             centerY, r1, centerX, centerY, r2);

                             gradient.addColorStop(0, '#FC511B');
                             gradient.addColorStop(0.2, '#AE545B');
                             gradient.addColorStop(0.3, '#645897');
                             gradient.addColorStop(0.4, '#2E5AC3');
                             gradient.addColorStop(0.6, '#0063E9');
                             gradient.addColorStop(0.8, '#0091E9');
                             gradient.addColorStop(1, '#00B9E9');

                             return gradient;
                         },
                        }
                    ]
                },
                polarChartOptions: {
                    onHover: this.onHoverChart,
                    responsive: true,
                    legend: { display: false },
                    tooltips: {enabled: false},
                    scale: {
                        ticks: {
                            backdropColor: 'transparent',
                            fontColor: '#7c7c7c',
                            fontFamily: 'Open Sans',
                            fontSize: 16,
                            beginAtZero: true,
                            min: 0,
                            max: 100,
                            stepSize: 10,
                            z: 2
                        },
                        gridLines: {
                            color: '#ffffff',
                            z: 1
                        }
                    }
                }

从“vue chartjs”导入{PolarArea}；
导出默认值{
扩展：PolarArea，
道具：['chartdata'，'options'，]，
安装的（）{
this.renderChart（this.chartdata，this.options）
}
}

我实现组件的页面：

<script>
    import {PolarArea} from 'vue-chartjs';
    export default {
        extends: PolarArea,
        props: ['chartdata', 'options'],
        mounted() {
            this.renderChart(this.chartdata, this.options)
        }
    }
</script>

<style>
</style>

<PolarAreaChart chartId="polar-chart-quiz" ref="areaChart" :chartdata="quiz.polarChartData" :options="polarChartOptions" />

polarChartData: {
                    datasets: [
                        {
                            data: [],
                            backgroundColor: function(context) {
                             let centerX = context.chart.width / 2;
                             let centerY = context.chart.height / 2;
                             let r1 = context.chart.innerRadius;
                             let r2 = context.chart.outerRadius;
                             let gradient = context.chart.ctx.createRadialGradient(centerX, 
                             centerY, r1, centerX, centerY, r2);

                             gradient.addColorStop(0, '#FC511B');
                             gradient.addColorStop(0.2, '#AE545B');
                             gradient.addColorStop(0.3, '#645897');
                             gradient.addColorStop(0.4, '#2E5AC3');
                             gradient.addColorStop(0.6, '#0063E9');
                             gradient.addColorStop(0.8, '#0091E9');
                             gradient.addColorStop(1, '#00B9E9');

                             return gradient;
                         },
                        }
                    ]
                },
                polarChartOptions: {
                    onHover: this.onHoverChart,
                    responsive: true,
                    legend: { display: false },
                    tooltips: {enabled: false},
                    scale: {
                        ticks: {
                            backdropColor: 'transparent',
                            fontColor: '#7c7c7c',
                            fontFamily: 'Open Sans',
                            fontSize: 16,
                            beginAtZero: true,
                            min: 0,
                            max: 100,
                            stepSize: 10,
                            z: 2
                        },
                        gridLines: {
                            color: '#ffffff',
                            z: 1
                        }
                    }
                }

polarChartData：{
数据集：[
{
数据：[]，
背景颜色：功能（上下文）{
设centerX=context.chart.width/2；
设centerY=context.chart.height/2；
设r1=context.chart.innerRadius；
设r2=context.chart.outerRadius；
让gradient=context.chart.ctx.createRadialGradient（centerX，
centerY，r1，centerX，centerY，r2）；
渐变。添加颜色停止（0，#FC511B'）；
渐变。添加颜色停止（0.2'#AE545B'）；
渐变。添加颜色停止（0.3'#645897'）；
渐变。添加颜色停止（0.4'#2E5AC3'）；
渐变。添加颜色停止（0.6'#0063E9'）；
渐变。添加颜色停止（0.8'#0091E9'）；
渐变。添加颜色停止（1'#00B9E9'）；
回归梯度；
},
}
]
},
polarChartOptions：{
onHover:this.onHoverChart，
回答：是的，
图例：{display:false}，
工具提示：{enabled:false}，
比例：{
滴答声：{
backdropColor:'透明'，
fontColor:“#7c7c7c”，
fontFamily:“开放式SAN”，
尺寸：16，
贝吉纳泽罗：是的，
分:0,，
最高：100，
步长：10，
z:2
},
网格线：{
颜色：“#ffffff”，
z:1
}
}
}