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

要在悬停时更改数据点的颜色和大小，您需要设置pointHoverBackgroundColor和pointHoverRadius属性（根据需要）分别用于数据集，如此......

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'
      }]
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chart"></canvas>

Answer 2

对于使用ChartsJS的条形图，将旧线程作为已接受的答案对我不起作用。不确定那是旧版本，还是问题不在于条形图。以下适用于v2.8的条形图：

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

Ref1：https://www.chartjs.org/docs/latest/charts/bar.html#interactions

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

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

在chartjs中悬停时更改磅值和颜色

2 个答案: