jquery - Highcharts 队列图表在 ajax 后更新，在 Firefox 中具有多个图表

Question

所以如果你看看这个 js fiddle :

http://jsfiddle.net/a9dkU/

您可以看到，从外部运行 ajax 调用，图表能够大致同时更新。

但是，如果我执行 ajax 调用来更新点，就像这个 js fiddle 中那样， http://jsfiddle.net/8JZ35/3/

动画更新排队并仅在另一个完成后才触发。以前有人遇到过这个问题并找到了解决方案吗？我并不希望它们全部同时更新，而是希望图表重绘能够在另一个图表重绘完成之前开始。如果同时触发，两个图表可以同时更新，这似乎是一种奇怪的行为，但如果我分别执行它们，则在第一个图表完成之前我无法启动第二个图表更新。

请记住，我意识到 $.toJSON({obj}) 将是执行 echo ajax 调用的可接受且更好的方法，但它奇怪地为我抛出错误，我没有这样做有时间在我使用它的上下文中研究它们，所以我自己制作了字符串。

更新

这是一个 jsfiddle，可以更好地展示我在说什么。我向 ajax 添加了延迟，以便更好地模拟真实响应，因为 echo api 速度很快。如果在 Firefox 中查看，您可以非常具体地看到我在说什么。

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

Answer 1

你可以做类似的事情

 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/