使用带ID的数组将数据添加到高图表 [英] Adding data to a highchart chart using an array with IDs

问题描述

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

  var chart; //全局可用
 
 makeCharts = function（）{
 
图表= new Highcharts.Chart（{
图表：{
 renderTo：'container1' ，
类型：'scatter'
}，
系列：[{
 name：'a'，
 data：[{
'id'： 'point1'，
'x'：1，
'y'：2 
}，{
'id'：'point2'，
'x'： 2，
'y'：5 
}] 
}] 
 
}）; 
 
 
 
 $ b我希望能够使用类似于：
  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 来识别该点。 
 
解决方案
 <从广义上说，有两种方法可以动态修改图表数据。 
 
 
 
 
   Series.setData（） 当您想要用现有数据完全替换现有数据时一些新数据
 
 
  系列。 addPoint（） 当您想要动态添加点的子集时使用此方法。这种方法不仅仅是一次添加一个点，如果你再次仔细阅读文档，你会发现这个方法需要一个布尔型的重绘参数，参数的细节如下： 
 
 > 
 
 
 
 
 重绘：布尔型
默认为true。是否重新绘制
之后的图表将被添加。当添加多个点时，建议高度
的重绘选项设置为false，而
 chart.redraw（）在添加点数为
之后显式调用。 / p> 
 
在您的情况下，因为您想动态添加几个点，但保留现有点，您应该采用方法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  
 
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.
解决方案
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

                        
这篇关于使用带ID的数组将数据添加到高图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！