Javascript 动态图表和使用json的Highcharts_Javascript_Php_Json_Highcharts_Live Update

Javascript 动态图表和使用json的Highcharts

javascript php json highcharts

Javascript 动态图表和使用json的Highcharts,javascript,php,json,highcharts,live-update,Javascript,Php,Json,Highcharts,Live Update,我有一个关于如何使用json创建动态图表的问题，我尝试过，但我的图表没有显示结果，当我签出时，我的代码没有错误。这是我的代码： <script> var chart; // global function requestData() { $.ajax({ url: 'api_heartrate.php', success: function(point) { v

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


var图表；//全球的
函数requestData（）{
$.ajax({
url:'api_heartrate.php'，
成功：功能（点）{
var系列=图表系列[0]，
shift=series.data.length>20；//如果序列长度超过20，则进行shift
//补充一点
chart.series[0].添加点（eval（point），true，shift）；
//一秒钟后再打
setTimeout（requestData，1000）；
},
缓存：false
});
}
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
defaultSeriesType:“样条线”，
活动：{
加载：请求数据
}
},
标题：{
文本：“实时随机数据”
},
xAxis：{
键入：“日期时间”，
像素间隔：150，
最大缩放：20*1000
},
亚克斯：{
最小填充：0.2，
最大填充：0.2，
标题：{
文本：“值”，
差额：80
}
},
系列：[{
名称：'随机数据'，
数据：[]
}]
});     
});
`

这是我的json：

[{“时间”：“2018-08-02 09:30:11”，“尼莱传感器”：“78”}]

我尝试了以下链接中的教程：

感谢您的关注，很高兴等待答案：）

您的方法中存在多个小错误

eval

is，改为使用

JSON.parse

解析它

在加载期间，尚未定义图表，因此回调将无法工作

自1970年以来，Highcharts需要以毫秒为单位的时间

highcharts需要一个对象

{x:，y:，…}

你给它

{time:，nilai_sensor:}

解决方案：

point=JSON.parse（point）

新日期（点[0]。时间）。getTime（）

{x:newdate（点[0].time）.getTime（），y:point[0].nilai_sensor}

这里是一个使用静态数据输入的工作示例（还有一些额外的时间来保持它的移动）：
Highcharts和Chart不是同一个库。jsI很抱歉，我之前写错了标题，我的意思是HighChart你是我的英雄！是的，你是对的。我在那里犯了个错误。谢谢你的更正
events: { load: function() { setInterval(function() { requestData(chart) }, 1000); } }