[英]Change point size and color on hover in chartjs
我使用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
}]
}
})
要改变数据点对多点的颜色和大小上悬停,你需要设置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>
对于使用 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
希望它可以帮助像我这样的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.