图表JS雷达hovercolorbackground不起作用

时间:2020-02-28 03:30:13

标签: javascript jquery html colors chart.js

我能够使用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);
}

这是图表的图像 enter image description here

我希望整个数据集区域的颜色在悬停时发生变化,但是什么都不会改变。感谢您的帮助

0 个答案:

没有答案
相关问题