Highchart不在网页上呈现，Javascript

我的数据库中有数以千计的数据点。所以我想用Highcharts在我的网页图表中显示这些数据点

到目前为止，我所做的是从数据库中获取数据并将其解析为javascript。但是在下一步。我不知道为什么我的数据点在图表中不可见

可能是我做错了什么。我想要的是我需要一个1000点的窗口。一秒钟内可以画出130个点

这些点在控制台日志

console.log（y）

中呈现，但在点完成之后。控制台日志显示

undefined

值并持续计数

undefined

这是我的代码：

  var x =[] ;
    var countno = [] ;
     for(j=0 ;j<2000 ;j++)
      {
        x.push(Math.random());
        countno.push(j);
      }
        var values = x;
        var number = countno ;


        var numArray = values;

        console.log(numArray) ;

        var i = 0;

function next() {  

  return numArray[i++];
}

        var countArray = number;
        console.log(countArray) ;

function countval() {  

  return countArray[i++];

}

    Highcharts.chart('container', {
    chart: {
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function() {

                // set up the updating of the chart each second
                var series = this.series[0],
                    chart = this;
                var count = 0 ;
                var draw = setInterval(function() {
                         x = countval(); // current time
                        y =next();
                        console.log(y) ;
                         if (i == numArray.length && i == countArray.length) {
                            clearInterval(draw);
                            return;
                        }
                        chart.redraw(false);
                    series.addPoint([x, y], false, true);

                }, 1000/130);


            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'ECG Graph Plot From MySQl Data'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            enabled: false
        },
        tickPixelInterval: 150
    },
    yAxis: {
       // max: 1.5,
       // min: -1.5,
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        animation: false,
        name: 'ECG Graph Plot From MySQl Data',
         dataGrouping: {
        enabled: false
    },
        data:[]
    }]
});

var x=[]；
var countno=[]；
对于（j=0；j您可以使用这段代码来实现它：

chart: {
  events: {
    load: function() {

      // set up the updating of the chart each second
      var series = this.series[0],
        chart = this;
      var count = 0;
      var draw = setInterval(function() {
        x = countval(); // current time
        y = next();

        if (i == numArray.length && i == countArray.length) {
          clearInterval(draw);
          return;
        }

        if (x > 130) {
          series.addPoint([x, y], true, true, false);
        } else {
          series.addPoint([x, y], true, false, false);
        }
      }, 100);
    }
  }
}

演示：

  var x =[] ;
    var countno = [] ;
     for(j=0 ;j<2000 ;j++)
      {
        x.push(Math.random());
        countno.push(j);
      }
        var values = x;
        var number = countno ;


        var numArray = values;

        console.log(numArray) ;

        var i = 0;

function next() {  

  return numArray[i++];
}

        var countArray = number;
        console.log(countArray) ;

function countval() {  

  return countArray[i++];

}

    Highcharts.chart('container', {
    chart: {
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function() {

                // set up the updating of the chart each second
                var series = this.series[0],
                    chart = this;
                var count = 0 ;
                var draw = setInterval(function() {
                         x = countval(); // current time
                        y =next();
                        console.log(y) ;
                         if (i == numArray.length && i == countArray.length) {
                            clearInterval(draw);
                            return;
                        }
                        chart.redraw(false);
                    series.addPoint([x, y], false, true);

                }, 1000/130);


            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'ECG Graph Plot From MySQl Data'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            enabled: false
        },
        tickPixelInterval: 150
    },
    yAxis: {
       // max: 1.5,
       // min: -1.5,
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        animation: false,
        name: 'ECG Graph Plot From MySQl Data',
         dataGrouping: {
        enabled: false
    },
        data:[]
    }]
});



你能在JSFIDLE这样的在线代码编辑器中用数据库中的样本数据重现这个问题吗？你可以使用这个模板：好的，给我一点时间。我将尝试用Javascript复制数据库值。@WojciechChmielI已经添加了小提琴。请查看它。@wojciechchmiel你根本没有重新绘制图表，检查这个演示：.很难理解你想要达到的目标。也许这把小提琴会帮助你：