Chart.js - 悬停后数据点变小

Question

我正在使用Chart.js创建雷达图。我已经为每个数据集设置了数据点的大小（半径）。但是，当我将鼠标悬停在数据点上时，半径会变小并保持这种状态，如下所示：

这是我生成图表的方式：

new Chart($('#graph'), {
    type: 'radar',
    data: {
        labels: ['a','b','c'],
        datasets: [
            {
                label: 'aaa',
                data: [10,15,5],
                backgroundColor: 'rgba(247, 151, 35, 0.5)',
                borderColor: 'rgba(247, 151, 35, 1)',
                pointBackgroundColor: 'rgba(247, 151, 35, 1)',
                pointBorderColor: "#fff",
                pointRadius: 5,
                borderWidth: 1
            }
        ]
    },
    options: {
        scale: {
            type: 'radialLinear',
            ticks: {
                // hide tick labels
                display: false,
                min: 0,
                max: 20,
                stepSize: 1
            },
            gridLines: {
                // hide lines
                display: false
            }
        },
        legend: {
            position: 'bottom'
        }
    }
});

这是一个小提琴，您可以在其中看到自己的效果：https : //jsfiddle.net/nj4qehLm/

我怎样才能让数据点保持我设置的大小，这样当我悬停时什么都不会改变？为什么会发生这种情况？

Answer 1

由于某些原因，Chart.js它似乎没有兑现pointRadius您可能需要将radius属性集添加到您的相同值的值，pointRadius这将解决问题。

像这样的东西，

radius: 5,
pointRadius: 5,

工作小提琴：https : //jsfiddle.net/nj4qehLm/2/

HTML代码：

<canvas id='graph' height=200 width=200></canvas>

Javascript代码：

new Chart($('#graph'), {
            type: 'radar',
            data: {
                labels: ['a','b','c'],
                datasets: [
                    {
                        label: 'aaa',
                        data: [10,15,5],
                        backgroundColor: 'rgba(247, 151, 35, 0.5)',
                        borderColor: 'rgba(247, 151, 35, 1)',
                        pointBackgroundColor: 'rgba(247, 151, 35, 1)',
                        pointBorderColor: "#fff",
                        radius: 5,
                        pointRadius: 5,
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scale: {
                    type: 'radialLinear',
                    ticks: {
                        // hide tick labels
                        display: false,
                        min: 0,
                        max: 20,
                        stepSize: 1
                    },
                    gridLines: {
                        // hide lines
                        display: false
                    }
                },
        legend: {
                    position: 'bottom'
                }
            }
        });

希望这可以帮助！

Answer 2

Chartjs 可以pointHoverRadius控制悬停时点的半径，因此只需将其设置为与您的相同pointRadius：

pointRadius: 5,
pointHoverRadius: 5

使用半径属性对我来说不起作用。