javascript - 当鼠标悬停在图例点上时，CanvasJs 隐藏图表中的某些线条

Question

我制作了带有图例的多个折线图，现在我是否可以制作下一个折线图：当鼠标悬停在图例中的任何点上时，图表中不属于该图例点的所有线都会隐藏或不可见？

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

Answer 1

您可以通过在图例项的 mouseover 和 mouseout 上将其 visible 属性设置为 false / true 来隐藏/取消隐藏任何 dataSeries。这是一个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();
    }
}