1

我有一个关于如何使用 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"}]

我尝试遵循此链接中的教程： Highcharts Dynamic Chart with MySQL Data doesn't reload

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

4

1 回答 1

1

您的方法中有多个小错误

  1. eval不好，改用解析它JSON.parse。
  2. 在加载期间，图表尚未定义，因此您的回调将不起作用。
  3. 自 1970 年以来，Highcharts 需要以毫秒为单位的时间。
  4. highcharts 期望{x: , y: ,...}你给它一个对象{time: , nilai_sensor: }。

解决方案：

  1. point = JSON.parse(point)
  2. events: {
  load: function() {
    setInterval(function() {
      requestData(chart)
    }, 1000);
  }
}
  3. new Date(point[0].time).getTime()
  4. {x: new Date(point[0].time).getTime(), y: point[0].nilai_sensor}

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

于 2018-08-02T10:40:58.413 回答