javascript 使用带有 ID 的数组将数据添加到 highchart 图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12739926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding data to a highchart chart using an array with IDs
提问by djq
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:
我想将一个系列添加到一个 highchart 散点图中，我在其中命名系列中的每个点。我通过以下方式创建图表：
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?
但这不正确。是否可以使用这种方法更新图表，其中每个点都有一个 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:
只是为了澄清，我希望能够直接传递数组，而不是使用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]
});
}
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 idwhen 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.
但是id当我选择该点时，我可以访问的唯一方法是通过this.point.config[2]. 使用以下方法，我无法用来chart.get('pointID')识别一个点，因为我没有设置ID. 我希望能够仅使用ID.
回答by Jugal Thakkar
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
- Series.setData()当你想用一些新数据完全替换现有数据时使用这种方法
- Series.addPoint()当您想要动态添加点的子集时，请使用此方法。这个方法不只是一次添加一个点，如果你再仔细阅读文档你会发现这个方法需要一个布尔重绘参数，参数细节如下
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.
redraw: Boolean
默认为 true。添加点后是否重新绘制图表。添加多个点时，强烈建议将重绘选项设置为false，而是在添加点完成后显式调用chart.redraw()。
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
在您的情况下，由于您想动态添加一些点，但保留现有点，您应该使用方法 2。但是您需要在循环中使用它，并将重绘设置为 false（因此解决了慢），然后在循环之后，显式调用重绘方法
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
回答by Igor Shastin
Try using series.addPoint.
尝试使用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'
}]);
回答by Igor Shastin
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 applyOptionsof Highcharts.Point prototype.
我们需要在applyOptionsHighcharts.Point 原型的方法中添加另一条语句。
if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2];
Hereyou can see it in action.
在这里你可以看到它的实际效果。
