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>

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