Ajax与highchart加载多个折线图失败

HIGHCHARTS
1

多个highcharts折线图在event中加载不同ajax，只有最后一个显示，同步异步也设置了，不行。
代码如下：

function requestData1() {
  $.ajax({
     url: 'getdata1.php',
     async: false,
     success: function(point1) {
        var series = chart.series[0],
           shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
        // 新增点操作
        //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
        chart.series[0].addPoint(point1, true, false);
        // 一秒后继续调用本函数
        setTimeout(requestData1, 10000);
     },
     // cache: false
  });
};

function requestData2() {
  $.ajax({
     url: 'getdata2.php',
     async: false,
     success: function (point2) {
        var series = chart.series[0],
           shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
        // 新增点操作

        //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
        chart.series[0].addPoint(point2, true, false);
        // 一秒后继续调用本函数
        setTimeout(requestData2, 1000);
     },
     //cache: false
  });
};
var chart = null;

// 定义全局变量
$(document).ready(function () {
  chart = Highcharts.chart('container1', {
     chart: {
        inverted: true,
        type: 'spline',
        events: {
           load: requestData1// 图表加载完毕后执行的回调函数
        }
     },
     title: {
        text: '111'
     },
     xAxis: {
        tickPixelInterval: 150,
        maxZoom: 20
     },
     yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
           text: 'Value',
           margin: 80
        }
     },
     series: [{
        name: '随机数据',
        data: [],
     }]
  });

  chart = Highcharts.chart('container2', {
     chart: {
        inverted: true,
        type: 'spline',
        events: {
           load: requestData2// 图表加载完毕后执行的回调函数
        }
     },
     title: {
        text: '111'
     },
     xAxis: {
        tickPixelInterval: 150,
        maxZoom: 20
     },
     yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
           text: 'Value',
           margin: 80
        }
     },
     series: [{
        name: '随机数据',
        data: [],
     }]
  })
})
2

chart = Highcharts.chart(‘container1’, {

和

chart = Highcharts.chart(‘container2’, {

这两者后面的 chart 对象会覆盖前面，对应的 requestData1 和 requestData2 里的 chart 对象都是最后图表实例。

修改要点：

两个图表分别定义对象

var chart1, chart2;
 //...
chart1 = Highcharts.chart('container1', {
chart2 = Highcharts.chart('container2', {

对应 requestData1 函数里用 chart1， requestData2 里用 chart2

跟进一步，由于你的两个图表代码几乎雷同，只是数据接口不一样而已，所以完全可以封装成函数来处理

3

按照您的方法改了，还是不可以，显示1635906195(1)
以下是目前的代码：

var chart1,chart2 ;
function requestData1() {

$.ajax({
url: ‘getdata1.php’,
async:false,

success: function rd1 (point1) {
  var series= chart1.series[0],
      shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

  // 新增点操作
  //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
  chart2.series[0].addPoint(point1, true, false);

  // 一秒后继续调用本函数
  setTimeout(requestData1, 10000);
},

// cache: false
});

};
function requestData2() {

$.ajax({
url: ‘getdata2.php’,
async:false,

success: function rd1 (point2) {
  var series= chart2.series[0],
      shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

  // 新增点操作
  //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
  chart2.series[0].addPoint(point2, true, false);

  // 一秒后继续调用本函数
  setTimeout(requestData2, 1000);
},

//cache: false

});

};

// 定义全局变量
$(document).ready(function() {

chart1 = Highcharts.chart(‘container1’, {
chart: {
inverted: true,
type: ‘spline’,
events: {
load: requestData1// 图表加载完毕后执行的回调函数
}
},
title: {
text: ‘111’
},
xAxis: {

  tickPixelInterval: 150,
  maxZoom: 20 
},
yAxis: {
  minPadding: 0.2,
  maxPadding: 0.2,
  title: {
    text: 'Value',
    margin: 80
  }
},
series: [{
  name: '随机数据',
  data: [],
}]

});

chart2 = Highcharts.chart(‘container2’, {
chart: {
inverted: true,
type: ‘spline’,
events: {
load: requestData2// 图表加载完毕后执行的回调函数
}
},
title: {
text: ‘111’
},
xAxis: {

  tickPixelInterval: 150,
  maxZoom: 20 
},
yAxis: {
  minPadding: 0.2,
  maxPadding: 0.2,
  title: {
    text: 'Value',
    margin: 80
  }
},
series: [{
  name: '随机数据',
  data: [],
}]

})

}

)