График Highcharts, отображающий значение 0 непрерывно: массив Javascript

Question

Я пытаюсь отобразить точки на графике с помощью PHP Mysql, я сохранил данные в массив в переменной php, а затем передал этот массив в массив Javascript.

Теперь, что я хочу сделатьв том, что я хочу показывать элементы массива один за другим через каждую секунду. Но что происходит, так это то, что график непрерывно отображает значение 0 на старшей диаграмме.

Вот мой код:

numArray = [1,5,3,5,6,3,3,7,4,6,7,3,5,3,6,7,5,2,5,7,4,6,4,5,3,6,7,8,5,4,3,6,7,8,5,7,8,8,5,3,2,4,6,7,4,6,7] ;
/* Just for understanding */

var json_array =numArray ;

var i = 0;

function next() {  
 return json_array[i];
  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;

                setInterval(function() {
                    var x = (new Date()).getTime(), // current time
                        y =next();
                        console.log(y) ;
                    series.addPoint([x, y], false, true);
                }, 1000);

                setInterval(function() {
                    chart.redraw(false);
                }, 1000);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        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: 'Random data',
        data: (function() {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -1000; i <= 0; i += 1) {
                data.push([
                    time + i * 10,
                    null
                ]);
            }
            return data;
        }())
    }]
});

Вот созданная мною скрипка:

https://jsfiddle.net/abnitchauhan/v7tdLr1j/2/

Диаграмма работает до бесконечного цикла и показывает только 0 Значение. Я просто хочу показать значения массива до конца

Answer 1

Проверьте приведенную ниже демонстрацию с результатом, которого вы, вероятно, хотите достичь.

Код:

const numArray = [1, 5, 3, 5, 6, 3, 3, 7, 4, 6, 7, 3, 5, 3, 6, 7, 5, 2, 5, 7, 4, 6, 4, 5, 3, 6, 7, 8, 5, 4, 3, 6, 7, 8, 5, 7, 8, 8, 5, 3, 2, 4, 6, 7, 4, 6, 7];

Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        let chart = this,
          now = (new Date()).getTime(),
          i = 0;

        const interval = setInterval(function() {
          chart.series[0].addPoint([
            now + i * 1000,
            numArray[i]
          ]);

          i++;

          if (i === numArray.length) {
            clearInterval(interval);
          }
        }, 1000);
      }
    }
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{}]
});

Демо:

• https://jsfiddle.net/BlackLabel/vf906wam/

Answer 2

Во-первых, в вашем методе setInterval нет конечной точки. Он будет продолжать звонить через 1 сек. Вы даже не можете остановиться. Во-первых, есть отдельная функция для формирования данных. Допустим, данные серии инициализированы. Иметь в качестве глобальной переменной. затем получите Обещание, чтобы сгенерировать вашу точку х.

var promise1 = new Promise(function(resolve, reject) {
   var points [];
   setTimeout(function() {
      var x = (new Date()).getTime(), // current time
      y =next();
      points.push([x, y], false, true);
      if(your counter let says 1000 : points.lenght > 1000) {
        resolve(points) //resolve your points
      }
   }, 300);});

, оберните ее выше функции и верните обещание и вызовите его.

callYourDefinedFun().then(function(points) {
  // now you have points ready, series ready make your chart configuration and then 
 // call to render the chart
});