ChartJS v2 - 将鼠标悬停在饼图/甜甜圈部分上时的外弧

Question

我需要使用 ChartJS v2 创建一个饼图/圆环图，当用户将鼠标悬停在其上时，它会显示分段的外弧。类似这样的事情：

有谁知道我怎样才能实现这一目标？

非常感谢 ：）

Answer 1

您可以通过设置数据集hoverBorderWidth来实现这一点

var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Microsoft Internet Explorer", "Google Chrome", "Mozilla Firefox", "Opera", "Safari"],
        datasets: [{
            label: 'Number of votes',
            data: [60, 20, 10, 8, 2],
            backgroundColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
            borderColor: '#fff',
            borderWidth: 1,
            hoverBorderColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
            hoverBorderWidth: 8
        }]
    },
    options: {
        responsive: false,
        legend: {
            display: false
        },
        tooltips: {
            displayColors: false
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="350" height="350"></canvas>

或者，您也可以创建自己的插件。