[英]Change point size and color on hover in chartjs
I have made a line chart using chartjs.我使用chartjs制作了一个折线图。 Now I want is whenever someone hover on the points the points size and color will change.
现在我想要的是每当有人悬停在点上时,点的大小和颜色都会改变。 I tried with some options but didn't manage to get it working.
我尝试了一些选项,但没有设法让它工作。 Can someone help me on this please?
有人可以帮我吗?
javascript: 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
}]
}
})
To change the data point 's color and size on hover, you'll need to set pointHoverBackgroundColor
and pointHoverRadius
property (as needed) respectively for the dataset, like so ...要改变数据点对多点的颜色和大小上悬停,你需要设置
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>
Answering an old thread as accepted answer didn't work for me for bar-chart using ChartsJS.对于使用 ChartsJS 的条形图,将旧线程作为已接受的答案回答对我不起作用。 May be that was older version or the question was not for bar-chart, not sure.
可能是旧版本,或者问题不是条形图,不确定。 The following works on v2.8 for bar-chart:
以下适用于条形图的 v2.8:
hoverBackgroundColor: 'red',
hoverBorderColor: 'blue',
hoverBorderWidth : '3'
Ref1 : https://www.chartjs.org/docs/latest/charts/bar.html#interactions Ref1: https : //www.chartjs.org/docs/latest/charts/bar.html#interactions
Ref2 : https://www.chartjs.org/docs/latest/configuration/elements.html#point-configuration Ref2: https : //www.chartjs.org/docs/latest/configuration/elements.html#point-configuration
Hoping it may help someone like me.希望它可以帮助像我这样的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.