3

So if you check out this js fiddle:

http://jsfiddle.net/a9dkU/

You can see that running from out side an ajax call the charts are able to update at roughlythe same time.

However, if I do an ajax call to update the points like in this js fiddle, http://jsfiddle.net/8JZ35/3/

the animation updates queue up and fire only after the other is done. Has anybody ran into this before and figured out a solution? I'm not looking to necessarily have them all update at exactly the same time, but rather for the chart redraws to be able to begin before another chart redraw finishes. It seems like a strange behavior that 2 charts can update at the same time if fired at the same time, but I can't start the second chart update until the first finishes if I do them separately.

keep in mind I realize that $.toJSON({obj}) would be an acceptable and better way to do the echo ajax call but it was throwing errors for me oddly and I ddidn't have time to look into them in the context I was using it so I just made the string myself.

UPDATE

Here is a jsfiddle that better shows what I'm talking about. I added a delay to the ajax to better simulate a real response since the echo api is way fast. YOu can very specifically see what I'm talking about if viewing in firefox.

http://jsfiddle.net/M8pkA/2/

4

3 回答 3

0

你可以做类似的事情 

 var objs=[];//array for addPoint
    function doAjax(obj)
    {
        var series = obj.series[0];

      var x_val = (new Date()).getTime();
      var y_val = Math.random();

      var data = {
          json:"{\"x\": "+x_val+", \"y\": "+y_val+"}"              
        }       

        $.ajax({
            url:"/echo/json/",
            data:data,
            type:"POST"
        })
        .done(function(result){
           console.log(result);

            if(objs.length<$(".charts").length){
                objs.push(function(){series.addPoint([result.x, result.y], true, true)}); 
            }
            if(objs.length==$(".charts").length){//all data loaded 
                $.each(objs,function(i,n){
                    n();//call each addPoint
                });
                objs=[];//clear array
            }



        }); 
    }

并在重绘时更改 setTimeout 

$('#container').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function() {doAjax(this);},
                redraw:function(){var t=this;setTimeout(function() {doAjax(t);}, 1000);}
            }
        },

http://jsfiddle.net/8JZ35/4/

于 2013-06-17T16:47:57.747 回答
0

事实证明，这种行为目前只发生在 Firefox 中。我将问题追踪到 Firefox 对同一个 url 的多个 ajax 请求问题。我不确定这是否就是 firefox 打算如何处理这些情况，或者它是否应该是一种缓存机制。

基本上，这里的答案是确保您的更新不使用完全相同的 url。

因此，如果您的 ajax 方法是GET您可能会很好，因为您的参数将强制 url 不同。如果您正在使用POST或以某种方式从同一个GETurl 获得不同的响应，只需附加一个包含随机值的参数。我最终只是以毫秒为单位附加了 unix 纪元时间，因为我不能保证 2 个请求不会在同一实际秒内触发。

有关工作答案/示例，请参阅此 JSFIddle

于 2013-06-24T18:46:28.760 回答
0

您也可以尝试仅在第二个调用ajax()函数中重绘（）两个图表，

http://jsfiddle.net/8JZ35/5/

http://api.highcharts.com/highstock#Series.addPoint()

于 2013-06-18T14:11:28.913 回答