javascript - 图表js雷达悬停颜色背景不起作用

Question

我能够使用 Chart js 创建一个很棒的雷达图。我唯一的问题是数据集属性 hoverBackgroundColor 没有任何影响。这是我的代码：

chosen = [[5.2,0,1,9,11],[5.1,2,4,9,7],[5.1,2,2,9,8]] 
playerNames= ['Henderson','Baldock','Stevens']

function createRadarComparison(chosen, playerNames) {
    var ctx = document.getElementById('myChart').getContext('2d');
    var borderColors = ['#ff82827d', '#82ff917d', '#fdff827d','#b882ff7d']
    var colors = ['#ff828252', '#82ff8c52', '#fdff8252', '#b882ff52' ];
    datasetdata = []
    for (var i = 0; i < chosen.length; i++) {
        datasetdata[i] = {
            label: playerNames[i],
            data: chosen[i],
            backgroundColor: colors[i],
            hoverBackgroundColor: colors[i],
            borderColor: borderColors[i],
            pointBorderColor: "#fff",
            pointBackgroundColor: borderColors[i],
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
        }
    }
    var config = {
        type: 'radar',
        data: {
            labels: ['Price', 'Goals', 'Assits', 'Clean Sheets', 'Bonus'],
            datasets: datasetdata
        },
        options: {
            legend: {
                position: 'top',
                labels: {
                    "fontSize": 10,
                }
            },
            scale: {
                ticks: {
                    beginAtZero: true,
                    display: false
                }
            },
            maintainAspectRatio: false,
        }
    };
    var myChart = new Chart(ctx, config);
}

这是图表的图像

我希望整个数据集区域的颜色在悬停时会发生变化，但没有任何变化。感谢你的帮助

标签： javascriptjqueryhtmlcolorschart.js