使用Highcharts按ID选择一个点

djq*_*djq 5 javascript highcharts

使用Highcharts,我如何使用它的id选择一个点?例如,如果我使用以下代码创建图表:

 chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'scatter'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [{
                name: 'Point1',
                x: 1,
                y: 2
            }, {
                name: 'Point2',
                x: 2,
                y: 5
            }]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });
Run Code Online (Sandbox Code Playgroud)

工具提示告诉我,当我将鼠标悬停在一个点上时,id是什么.但是,我无法弄清楚识别这一点的语法.我知道chart1.series[0].name返回Jane. Also, chart1.series [0] .data [0] .name returnspoint1`有没有一种简单的方法可以选择点并改变颜色只知道'point1'?

我想知道除了每次循环所有点之外是否还有更有效的方法.

Ric*_*ann 10

您可以id为要获得的每个点设置一个.

series: [{
    name: 'Jane',
    data: [{
        'name': 'Point1',
        'id': 'point1',
        'x': 1,
        'y': 2
    }, {
        'name': 'Point2',
        'id': 'point2',
        'x': 2,
        'y': 5
    }]
}, {
    name: 'John',
    data: [5, 7, 3]
}]
Run Code Online (Sandbox Code Playgroud)

然后,您可以通过以下代码获得重点.

// assuming that chart is your chart var
chart.get('point1');
Run Code Online (Sandbox Code Playgroud)

演示

或者如果你不想设置一个id你可以简单的循环thrue points来比较name你想要找到的point name.

参考:

  • 除了效率不高。干净和简单仍然如此,但在幕后 HighChart 的“chart.get()”方法正在遍历每个系列和该系列中的每个点以找到匹配项。无论如何,对于已经按 x 值排序的数据集,它是 O(n)。因此,由应用程序开发人员使用 highcharts 实现的二进制搜索将提供更好的效率,因为您至少可以自己进行 O(log N) 搜索。 (2认同)