2

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

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.

4

3 回答 3

4

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

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

redraw : Boolean
默认为真。添加点后是否重绘图表。添加多个点时，强烈建议将 redraw 选项设置为 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();

动态添加多个点 | Highcharts 和 Highstock @ jsFiddle

于 2012-10-07T19:04:54.007 回答
1

Try using series.addPoint.

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

But if you need to set data for series, use

chart.series[0].setData([{
    x:  0,
    y:  0,
    id: 'anything'
},{
    x:  2,
    y:  2,
    id: 'another'
}]);
于 2012-10-05T07:03:30.157 回答
1

只要您可以像这样传递数据：

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

（正如您在问题中所说），我可以建议您使用一些技巧。

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

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

在这里你可以看到它的作用。

于 2012-10-07T17:49:08.767 回答