javascript - Vue Chart.js - 使极地区域图在悬停时改变颜色

Question

我想做以下事情：

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

我的组件：

<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
                        }
                    }
                }

标签： javascriptvue.jscharts