Chart.js：點擴大懸停距離

Question

是否有一個Chart.js選項用於增加距離其工具提示變爲活動點的距離？

默認情況下，點是「活動」，並且當鼠標直接懸停在點上時顯示工具提示。我想給用戶多一點點區域讓他們「活躍」。

謝謝！

Answer 1

你可以做到這一點，通過pointHitRadius屬性設置爲打擊距離的值，爲您的數據集，像這樣......

... 
datasets: [{ 
     pointHitRadius: 20, 
     ... 
}] 
... 

工作實例

var ctx = document.getElementById("myChart").getContext('2d'); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], 
 
     datasets: [{ 
 
     label: 'Rating', 
 
     data: [1, 2, 3, 4, 5, 6], 
 
     backgroundColor: 'rgba(209, 230, 245, 0.5)', 
 
     borderColor: 'rgba(56, 163, 236, 1)', 
 
     borderWidth: 1, 
 
     pointHitRadius: 20 //set as you wish 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

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