Question

我想在高图散点图中添加一个系列，我在其中命名系列中的每个点。我用以下方式创建图表：

var chart; // globally available

makeCharts = function(){

      chart = new Highcharts.Chart({
         chart: {
            renderTo: 'container1',
            type: 'scatter'
         },        
         series: [{
            name: 'a',
                data: [{                    
                    'id': 'point1',
                    'x': 1,
                    'y': 2
                }, {
                    'id': 'point2',
                    'x': 2,
                    'y': 5
                }]
            }]

      });
}

我希望能够使用以下内容更新图表上的点：

chart.series[0].setData([{id:['point3', 'point4', 'point5'], y:[0,1,2], x:[1,2,3]}])

但这不正确。是否可以使用这种方法更新图表，其中每个点都有一个ID？

编辑：

为了澄清，我希望能够直接传递数组，而不是使用addPoint()逐点添加数据。我可以遍历一个数组并使用addPoint()做这样的事情：

id:['point3', 'point4', 'point5'];
y:[0,1,2];
x:[1,2,3];

for (i=0; i<x.length; i++)
  {
  chart.series[0].addPoint({
    x:  x[[i],
    y:  y[i],
    id: id[i]
});

  }

但是，这很慢。使用以下方法添加数据要快得多：

chart.series[0].setData([[1,0],[2,1],[3,2]]);

我发现我可以添加这样的数据：

 chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);

但是，当选择该点时，我可以访问id的唯一方法是this.point.config[2]。使用以下方法，我无法使用chart.get('pointID')来标识点，因为我没有设置ID。我希望能够仅使用ID确定点。

Answer 1

从广义上讲，有两种方法可以动态修改图表数据

Series.setData()当您想要用一些新数据完全替换现有数据时，请使用此方法
Series.addPoint()当您想要动态添加点的子集时，请使用此方法。此方法不仅仅是一次添加一个点，如果再次仔细阅读文档，您会发现此方法采用布尔重绘参数，参数详细信息如下

重绘：布尔
默认为true。是否重绘图表后这一点被添加了。当添加多个点时，它是高度的建议将重绘选项设置为false，而不是在添加点之后显式调用chart.redraw（）结束。

在你的情况下，既然你想动态地添加几个点，但保留现有的点，你应该采用方法2.但你需要在循环中使用它，重绘被设置为false（因此解决缓慢的问题然后在循环之后，明确地调用重绘方法

<强>代码

var id = ['point3', 'point4', 'point5'],
    y = [0, 1, 2],
    x = [1, 2, 3];

for (var i = 0; i < x.length; i++) {
    chart.series[0].addPoint({
        x: x[i],
        y: y[i],
        id: id[i]
    },false);
}
chart.redraw();

Adding multiple points dynamically | Highcharts and Highstock @ jsFiddle

Answer 2

尝试使用series.addPoint。

chart.series[0].addPoint({
    x:  0,
    y:  0,
    id: 'anything'
});

但如果您需要为系列设置数据，请使用

chart.series[0].setData([{
    x:  0,
    y:  0,
    id: 'anything'
},{
    x:  2,
    y:  2,
    id: 'another'
}]);

Answer 3

只要你能像这样传递数据：

chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);

（正如你所说的那样），我建议你使用一点点黑客。

我们需要在Highcharts.Point原型的方法applyOptions中添加另一个语句。

if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2];

Here你可以看到它的实际效果。

使用带ID的数组将数据添加到高图表中

3 个答案: