javascript - 如何在 JQuery Flot 中制作可点击的线？

Question

我正在使用 flot 制作折线图。我试图实现的功能之一是高亮线(包括线上的点及其相应的图例)，如果用户单击该线，如果用户单击图表上的其他任何地方，则取消突出显示。

尝试了“plotclick”事件，但它需要点击点。我也需要能够在单击该行时获取该系列。

希望有办法做到这一点。

Answer 1

你必须手动搜索直线上最近的点，然后用这样的东西计算距离:

$('#placeholder').on('plotclick', function(event, pos, item) {
    $('#output').empty();
    if (item) { // clicked on point
        $('#output').text('series: ' + item.series.label + ' - datapoint: ' + item.dataIndex);
        return;
    }
    else { // search for line
        for (var i = 1; i < data.length; i++) {
            if (data[i-1][0] <= pos.x && pos.x < data[i][0]) {
                var lineX = (pos.x - data[i-1][0]) / (data[i][0] - data[i-1][0]);
                var lineY = data[i-1][1] + lineX * (data[i][1] - data[i-1][1]);
                if (Math.abs(pos.y - lineY) < maxDistance) {
                    $('#output').html('between datapoints ' + (i-1) + ' and ' + i + '<br />'
                        + 'distance from line: ' + Math.abs(pos.y - lineY).toFixed(3));
                }
                return;
            }
        }
    }
});

查看此 fiddle一个完整的例子。如果您有多个数据系列，您可以在每条线上搜索最近的点，然后计算最近的线。