Adding data to a highchart chart using an array with IDs

问题

I want to add a series to a highchart scatterplot where I am naming each point in the series. I create a chart in the following way:

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
                }]
            }]

      });
}

I would like to be able to update the points on the chart using something like:

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

but this is not correct. Is it possible to update a chart using this approach where each point has an ID?

EDIT:

Just to clarify, I would like to be able to pass the arrays directly, rather than adding the data point by point using addPoint(). I could loop through an array and use addPoint() doing something like this:

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]
});

  }

However, this is very slow. It's much quicker to add data using the following approach:

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

I have found that I can add data like this:

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

but then the only way that I can access the id when the point is selected, is through this.point.config[2]. With the following approach I am unable to use chart.get('pointID') to identify a point as I did not set the ID. I want to be able to identify the point using just the ID.

回答1:

Well broadly speaking there are two ways in which you can modify the chart data dynamically

Series.setData() Use this approach when you want to completely replace the existing data with some new data
Series.addPoint() Use this approach when you want to add a subset of the points dynamically. This method is not just for adding one point at a time, if you read the documentation carefully again you will find that this method takes a boolean redraw argument, and the argument detail is as following

redraw: Boolean
Defaults to true. Whether to redraw the chart after the point is added. When adding more than one point, it is highly recommended that the redraw option beset to false, and instead chart.redraw() is explicitly called after the adding of points is finished.

In your case, since you want to add a few points dynamically, but retaining the existing points, you should go with approach 2. But you need to use it inside a loop, with the redraw being set to false (hence solving the problem of being slow) and then after the loop, call the redraw method explicitly

Code

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

回答2:

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'
}]);

回答3:

As soon as you can pass your data like this:

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

(as you stated in question), I can suggest you to use a little hack.

We'll need to add another statement to method applyOptions of Highcharts.Point prototype.

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

Here you can see it in action.

来源：https://stackoverflow.com/questions/12739926/adding-data-to-a-highchart-chart-using-an-array-with-ids

标签

javascript

Highcharts

scatter-plot