javascript - 一次显示多个数据点: Highcharts

Question

我想做的是创建一个 php 文件来创建一个动态数组，该数组在每次页面加载时都会发生变化。

我创建的php代码是:

header("Content-type: text/json");
 $random = [] ;
 for($i=0 ;$i<10;$i++)
{
    $random[] = rand(0,10) ;
}
 echo json_encode($random);

现在我正在 Highcharts 中获取包含 10 个数字的数组。

图表显示了点，但不是以预期的方式显示了非常奇怪的线图。

我用于 Highchart 数据绘图的代码如下。

var chart;

function requestData() {
  $.ajax({
    url: 'data.php',
    success: function(data) {
      var series = chart.series[0],
        shift = series.data.length > 20; // shift if the series is 
      y = data;
      console.log(y);

      chart.series[0].addPoint(y, true, shift);

      setTimeout(requestData, 1000);
    },
    cache: false
  });
}

document.addEventListener('DOMContentLoaded', function() {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'line',
      events: {
        load: requestData
      }
    },
    title: {
      text: 'Live random data'
    },
    xAxis: {
      crosshair: false
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: 'Value',
        margin: 80
      }
    },
    series: [{
      name: 'Random data',
      data: []
    }]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

我不明白我在哪里犯了错误。控制台没有显示任何错误，还显示了数组值，但图表未按预期呈现。

我需要显示如下数据(只是线条应如何绘制的示例)。

https://jsfiddle.net/abnitchauhan/9Lam2b1v/

Answer 1

通过使用addPoint方法，您只能添加一个点。您需要在循环中使用 setData 方法或 addPoint:

function requestData() {
    $.ajax({
        url: 'https://api.myjson.com/bins/wmxsn',
        success: function(data) {
            var series = chart.series[0],
                shift = series.data.length > 20, // shift if the series is 
                y = data;

            data.forEach(function(el) {
                chart.series[0].addPoint(el, false, shift);
            });

            chart.redraw();

            //setTimeout(requestData, 1000);
        },
        cache: false
    });
}

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/02b83Lkh/

API 引用:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Series#setData