javascript - Flot:抓取距离十字线最近的点

Question

我一直在自定义我的图形，并且一直在尝试获得距离十字准线最近的点。我得到的最接近的是添加 mouseActiveRadius 选项，但这并没有达到我想要的效果。发生的情况是这样的:

可以看出，错误的点被突出显示。

我的情节代码:

    $.plot("#players_chart",
        [{
            label: "Total number of players",
            data: data.data_labels
        }],
        {
            series: {
                lines: {
                    show: true
                }
            },
            xaxis: {
                mode: "time",
                minTickSize: [1, "day"],
                timeformat: "%a"
            },
            yaxis: {
                tickDecimals: 0
            },
            crosshair: {
                mode: "x"
            },
            grid: {
                hoverable: true,
                autoHighlight: true,
                mouseActiveRadius : 1000
            }
        }
    );

有没有办法向十字线添加某种水平半径而不是网格？

提前谢谢您。

Answer 1

默认点突出显示与十字线插件分开，并且仅根据距光标的距离起作用。如果您只想使用水平距离，您可以手动突出显示。

设置 autoHighlight: false 并绑定(bind) plothover 事件，在该事件中搜索 x 轴上最近的点，然后突出显示该点。

类似的代码在example for the crosshair plugin中.