使用 json 的 Highcharts 动态图表

Question

我有一个关于如何使用 json 创建动态图表的问题，我试过了但我的图表没有显示结果，当我签出时，我的代码没有错误。这是我的代码：

    <script>
    var chart; // global

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

                // add the point
                chart.series[0].addPoint(eval(point), true, shift);

                // call it again after one second
                setTimeout(requestData, 1000);  
            },
            cache: false
        });
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 80
                }
            },
            series: [{
                name: 'Random data',
                data: []
            }]
        });     
    });
    </script>

</head>
<body>

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>`

这是我的 json： http://health.barrukurniawan.tech/api_heartrate.php [{"time":"2018-08-02 09:30:11","nilai_sensor":"78"}]

我尝试按照 link 中的教程进行操作： Highcharts Dynamic Chart with MySQL Data doesn't reload

感谢您的关注，很高兴等待答复:)

Answer 1

您的方法存在多个小错误

eval 是 bad，请改用 JSON.parse 解析它。
加载期间，图表尚未定义，因此您的回调将不起作用。
Highcharts 需要自 1970 年以来的毫秒数。
highcharts 需要一个对象 {x: , y: ,...} 你给它 {time: , nilai_sensor: }。

解法：

point = JSON.parse(point)

events: {
  load: function() {
    setInterval(function() {
      requestData(chart)
    }, 1000);
  }
}

new Date(point[0].time).getTime()
{x: new Date(point[0].time).getTime(), y: point[0].nilai_sensor}

这是一个使用静态数据输入的工作示例（以及一些额外的时间来保持它的移动）：https://jsfiddle.net/ewolden/md975oLk/23/

使用 json 的 Highcharts 动态图表

dynamic chart with Highcharts using json

javascript

php

json

highcharts

live-update