gpt4 book ai didi

Chart.js:加宽点的悬停距离

转载 作者:行者123 更新时间:2023-12-03 18:46:31 24 4
gpt4 key购买 nike

是否有 Chart.js 选项可以增加与其工具提示变为事件状态的点的距离?

默认情况下,一个点是“事件的”,当鼠标直接悬停在一个点上时会显示工具提示。我想在点周围给用户更多的区域,使它们“活跃”。

谢谢!

最佳答案

您可以通过设置 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>

关于Chart.js:加宽点的悬停距离,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44637477/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com