Jquery 在firefox中使用多个图表更新ajax之后的High charts队列图表

因此，如果您查看此js小提琴：

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

但是，如果我调用ajax来更新像这个js fiddle中那样的点，

动画将更新队列并仅在另一个队列完成后触发。以前有没有人遇到过这个问题并想出了解决办法？我并不希望它们都在同一时间更新，而是希望图表重画能够在另一个图表重画完成之前开始。如果同时启动两个图表，那么两个图表可以同时更新，这似乎是一种奇怪的行为，但是如果我单独执行第一个图表更新，则在第一个图表更新完成之前，我无法启动第二个图表更新

请记住，我意识到，

$.toJSON（{obj}）

将是执行echo ajax调用的一种可接受且更好的方法，但它会奇怪地为我抛出错误，我没有时间在使用它的上下文中查看它们，所以我只是自己创建了字符串

更新

这里有一个jsfiddle可以更好地显示我所说的内容。我在ajax中添加了一个延迟，以更好地模拟真实响应，因为EchoAPI速度非常快。如果在firefox中查看，您可以非常明确地看到我所说的内容

---

您可以执行以下操作

 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
            }



        }); 
    }        

您也可以在第二次调用

ajax（）

函数时尝试重新绘制（）两个图表

---

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

基本上，这里的答案是要么确保你的更新没有使用完全相同的url

因此，如果您使用的是ajax方法是

GET

，您可能会很好，因为您的参数将强制url不同。如果您使用的是

POST

或从同一

GET

url获得不同的响应，只需附加一个包含随机值的参数即可。我最后只是以毫秒为单位添加了unix历元时间，因为我不能保证两个请求不会在同一秒内发出

---

嗨，谢谢你的详尽回答。但是，尽管这个答案确实迫使他们一次更新所有内容，但它实际上并没有纠正根本问题，而是掩盖了它。假设我在一页上有20张这样的图表。我希望第一个能够开始重画，比如说，第14个已经在重画了。我将更新我的问题以更清楚地反映这一点。您是否尝试过在$.ajax上使用async:false？它在大多数情况下都起作用，迫使人们面对已经存在的同样情况。如果你添加了两个以上的图表，如果你看不到我的意思，你会更容易注意到。谢谢你的回答，但这也迫使图表同步更新，目标是让任何图表独立于其他图表正在做/已经做的事情开始更新。在这两个示例中，你都需要redraw（），因此结果是相同的。是的，但是redraw（）是如果函数没有同时启动，它们就会排队，如果我将其扩展为20个图表，我将不得不等待所有20个函数完成ajax调用，然后再更新它们中的任何一个，这只是另一种回答方法的风格。我将添加另一个例子，用更多的图表更清楚地显示这一点，以及我昨天在地狱中尝试的方法。给我一分钟。更新添加。一定要在firefox中看清楚它。您提到要等待最后一个ajax（重新绘制所有图表），但如果您有20个图表，并且希望同步所有图表，您也需要等待最后一个。换句话说，如果您想同步所有这些图表，您必须为所有ajax和redrwa图表提供数据。为什么不能使用一个ajax来获取所有图表的数据？

$('#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);}
            }
        },