ChartJS v2 - 懸停在餅餡餅/炸面圈餅上時的外部圓弧

Question

我需要使用ChartJS v2創建餅圖/圓環圖，該圖顯示用戶在其上懸停時的外部圓弧。一些同類者是這樣的：

有誰知道我能做到這一點？

非常感謝:)

Answer 1

你可以做到這一點通過數據集

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>

或者，你也可以創建自己的插件設置hoverBorderWidth 。