首页 文章

如何在没有循环的情况下捕获属于同一系列的所有点具有相同的xAxis值?

提问于
浏览
1

我不知道这是否是Highcharts的错误,但是我在同一个xAxis上绘制了同一系列中的两个值,我希望能够在工具提示中捕获相同xAxis中的所有点 . 不幸的是,Highcharts的印象只有一点存在:

Example

事实上,如果你将鼠标悬停在最左边的点并将光标移动到中心点上,值为 1 ,则值 2 的点将突出显示,这就是Highcharts认为我正在盘旋的点 .

我可以使用循环来确定哪些点也存在,但是我在使用共享工具提示的地方,我的 生产环境 图表可以在很多不同的系列中绘制数百个点,我认为这将是一种非常耗费资源的方法 .

Here is a JSFiddle demo使用以下系列数据生成上述图表:

series: [{
    data: [
        { x: 0, y: 1 }, { x: 1, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 2 }
    ]
}]

我还定义了以下 tooltip 属性:

tooltip: {
    shared: true,
    formatter: function() {
        return "Points: " + this.points.length + "<br>Value: " + this.y;
    }
}

如果我们在悬停在中心线上时调试 this.points ,我们会看到它包含的全部内容是:

[Object] 0: Object
    key: 1,
    percentage: undefined,
    point: Ga,
    series: c,
    total: undefined,
    x: 1,
    y: 2

根本没有提到 { x: 1, y: 1 } 点 .

如何在 { x: 1, y: 2 } 点旁边的工具提示中捕获和显示这些数据,而不必循环遍历每个系列中的每个点,以在工具提示 formatter 函数中找到类似的点?


更新

围绕这个问题的另一个好例子是启用 allowPointSelect 时:你根本无法单击 { x: 1, y: 1 } 点 - 当你这样做时,会选择 { x: 1, y: 2 } 点 . JSFiddle demo .

Example 2

1 回答

  • 1

    Part 1: Selecting the closest point

    使用折线图,Highcharts仅根据点和鼠标的水平距离计算最近的点 .

    这意味着一旦它构建了它的点树,给定两个具有相同x的点,它将始终返回它命中的第一个点 .

    您可以覆盖它以使用到点的实际距离,如下所示:

    series.kdComparer = 'distR';
    

    它应该给你真正的最近点 .

    Update: Selecting Other Points

    要在同一系列中获得具有相同x值的其他点,您可以利用Highcharts k-d点树 . 搜索这个比搜索系列点要快得多 much .

    这是一个更新的小提琴,它做到了这一点 . 请注意,即使未按顺序声明匹配点,这仍然有效 . 它还可以让您找到具有完全相同坐标的点 .

    http://jsfiddle.net/h11xfs5L/18/

相关问题