当鼠标悬停在图例点上时,CanvasJs 会隐藏图表中的某些线条
CanvasJs hide certain lines in chart whe mouse is over legend point
我用图例制作了多个折线图,现在我对是否可以制作下一个感兴趣:当鼠标悬停在图例的任何点上时,图表中不属于该图例点的所有线都会隐藏或只是看不见?
如果你能写一些例子,我将不胜感激。
您可以隐藏/取消隐藏任何数据系列,方法是在图例项的鼠标悬停和鼠标移开时将其可见 属性 设置为 false / true。这是一个jsfiddle
function onMouseOver(e) {
for(var i = 0; i < e.chart.options.data.length; i++) {
if (e.dataSeries !== e.chart.options.data[i]) {
e.chart.options.data[i].visible = false;
} else {
e.dataSeries.visible = true;
}
}
e.chart.render();
}
function onMouseOut(e) {
for( var i = 0; i < e.chart.options.data.length; i++){
e.chart.options.data[i].visible = true;
chart.render();
}
}
我用图例制作了多个折线图,现在我对是否可以制作下一个感兴趣:当鼠标悬停在图例的任何点上时,图表中不属于该图例点的所有线都会隐藏或只是看不见?
如果你能写一些例子,我将不胜感激。
您可以隐藏/取消隐藏任何数据系列,方法是在图例项的鼠标悬停和鼠标移开时将其可见 属性 设置为 false / true。这是一个jsfiddle
function onMouseOver(e) {
for(var i = 0; i < e.chart.options.data.length; i++) {
if (e.dataSeries !== e.chart.options.data[i]) {
e.chart.options.data[i].visible = false;
} else {
e.dataSeries.visible = true;
}
}
e.chart.render();
}
function onMouseOut(e) {
for( var i = 0; i < e.chart.options.data.length; i++){
e.chart.options.data[i].visible = true;
chart.render();
}
}