javascript - Highchart 无法在网页、Javascript 上呈现

Question

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

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

可能是我做错了什么。我想要的是我需要一个 1000 点的窗口。 1秒内可绘制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:[]
    }]
});

numArray 用于给出点值的 Y 轴。

countArray 用于 X 轴，给出编号。点数

这是我将数据库数据复制为 JS 数组的 fiddle 。

https://jsfiddle.net/abnitchauhan/mj8wa67x/

Answer 1

您可以使用这段代码来实现它:

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);
    }
  }
}

演示:

• https://jsfiddle.net/BlackLabel/6pkmo4b0/