有没有一种方法可以用鼠标悬停在折线图上突出显示一条线？
有没有一种方法可以用鼠标悬停在折线图上突出显示一条线？
提问于 2021-07-12 20:29:49
我将使用chart.js构建如下图：
如果能够允许用户将鼠标悬停在图形上的一条线上并以某种方式突出显示该线，这将是非常有用的。我该如何在chart.js中做到这一点？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-12 23:59:57
您可以在以下选项中使用onHover回调：
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: '#FF0000',
borderColor: '#FF0000'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: '#0000FF',
borderColor: '#0000FF'
},
{
label: '# of Cars',
data: [18, 4, 12, 6, 9, 2],
backgroundColor: '#FF1493',
borderColor: '#FF1493'
}
]
},
options: {
onHover: (e, activeEls, chart) => {
if (activeEls.length === 0) {
chart.data.datasets.forEach((dataset) => {
dataset.backgroundColor = dataset.backgroundColor.length === 9 ? dataset.backgroundColor.slice(0, -2) : dataset.backgroundColor;
dataset.borderColor = dataset.borderColor.length === 9 ? dataset.borderColor.slice(0, -2) : dataset.borderColor;
});
chart.update();
return;
}
const hoveredEl = chart.getElementsAtEventForMode(e, 'point', {
intersect: true
}, true)[0]
chart.data.datasets.forEach((dataset, i) => {
dataset.backgroundColor = (hoveredEl.datasetIndex === i || dataset.backgroundColor.length === 9) ? dataset.backgroundColor : dataset.backgroundColor + '4D';
dataset.borderColor = (hoveredEl.datasetIndex === i || dataset.borderColor.length === 9) ? dataset.borderColor : dataset.borderColor + '4D';
});
chart.update();
},
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68353537
复制
![常见的数据分析图表[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/6aa33eb3269f566dd5713ad0b587a3ac.png)
相似问题
有没有一种简单的方法在谷歌地图上突出显示一个区域？
chart在将鼠标悬停在折线图上时显示点
如何突出显示chartjs折线图上的特定区域
在绘图折线图上隐藏一条线
将鼠标悬停在svg地图上时突出显示表格
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
