在Chart.js中悬停时更改点大小和颜色

Question

我已经使用chartjs制作了折线图。现在我想要的是，每当有人将鼠标悬停在点上时，点的大小和颜色都会改变。我尝试了一些选项，但没有设法使它起作用。有人可以帮我吗？

javascript：

var ctx = $('#chart');
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
   labels: [1, 2, 3, 4, 5],
   datasets: [{
    label: '# of votes',
     data: [1, 2, 3, 4, 5],
     fill: false
   }]
 }
})

Answer 1

对于使用 ChartsJS 的条形图，将旧线程回答为已接受的答案对我来说不起作用。可能是旧版本或者问题不是条形图，不确定。以下适用于 v2.8 的条形图：

hoverBackgroundColor: 'red',
hoverBorderColor: 'blue',
hoverBorderWidth : '3'

参考1： https: //www.chartjs.org/docs/latest/charts/bar.html#interactions

参考2：https://www.chartjs.org/docs/latest/configuration/elements.html#point-configuration

希望它可以帮助像我这样的人。

Answer 2

若要更改数据点的颜色和大小上悬停，您将需要设置pointHoverBackgroundColor和pointHoverRadius属性（如需要）分别为数据集，像这样......

datasets: [{
   ...
   pointHoverRadius: 5,
   pointHoverBackgroundColor: 'red'
}]

????

datasets: [{
   ...
   pointHoverRadius: 5,
   pointHoverBackgroundColor: 'red'
}]

var ctx = $('#chart');
var myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: [1, 2, 3, 4, 5],
      datasets: [{
         label: '# of votes',
         data: [1, 2, 3, 4, 5],
         fill: false,
         pointHoverRadius: 5,
         pointHoverBackgroundColor: 'red'
      }]
   }
});