当鼠标悬停在图例点

时间:2015-05-22 16:27:54

标签: javascript charts canvasjs

我用图例创建了多个折线图,现在我感兴趣的是下一个是否可以做到:当鼠标超过图例中的任何点时,图表中不属于此图例点的所有线都会隐藏或只是不可见?

如果你能写一些例子,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

您可以通过在mouseover&上将其visible属性设置为false / true来隐藏/取消隐藏任何dataSeries。 mouseout of legend items。这是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();
    }
}