Question

我用flot制作折线图。我试图实现的功能之一就是强行（包括线上的点及其相应的图例），如果用户点击该线，如果用户点击图表上的任何其他位置，则取消突出显示。

尝试过＆＃39; plotclick＆＃39;事件，但它需要点击点。我也需要能够在点击该线时获得该系列。

希望有办法做到这一点。

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。如果您有多个数据系列，则可以在每一行上搜索最近的点，然后计算最近的行。

如何在JQuery Flot中制作可点击的行？

1 个答案: