javascript - 通过 Ajax 的 MYSQL 数据库到 Highcharts 图表

Question

我有一个数据库，其中包含三个不同参数的时间戳，但仅出于教育目的，我试图实时对一个参数绘制一张图表。这是我的 php 代码:

if ($result->num_rows > 0) {
    $count =0;
    echo '[';
    while($row = $result->fetch_assoc()) {

    echo '['.$row["time"].','.$row["temperature"].']';
    $count++;
        if ($count<"100") {
        echo ',';
        }
    }
    echo ']';
} 
else {
    echo "[[],[]]";
}


$link->close(); 

?>

显示以下 php 代码:

[[1511533905000,34],[1511534125000,34],[1511534201000,34],[1511535161000,34],[1511535221000,34],[1511535281000,34],[1511535306000,34],[1511535606000,34],[1511535907000,34],[1511536207000,34],[1511536507000,34],[1511536807000,34],[1511537108000,34],[1511537408000,34],[1511537708000,34],[1511538070000,85],[1511538370000,31],[1511538670000,31],[1511538971000,30],[1511539271000,30],[1511539571000,30],[1511539872000,30],[1511540172000,30],[1511540472000,30],[1511540773000,30],[1511936414000,25],[1511936714000,24],[1511937014000,85],[1511937315000,24],[1511937616000,24],[1511937916000,24],[1511938216000,24],[1511938517000,24],[1511938817000,24],[1511939117000,24],[1511939417000,24],[1511939718000,24],[1511940018000,24],[1511950908000,85],[1511951208000,23],[1511951509000,23],[1511951809000,23],[1511952109000,23],[1511952410000,23],[1511952710000,22],[1511953010000,22],[1511953310000,22],[1511953611000,22],[1511953911000,22],[1511954211000,22],[1511954512000,22],[1511954812000,22],[1511955112000,22],[1511955412000,22],[1511955713000,22],[1512056186000,31],[1512056486000,85],[1512056787000,30],[1512057087000,31],[1512057387000,30],[1512057688000,30],[1512057988000,30],[1512058289000,30],[1512058589000,30],[1512058889000,30],[1512059189000,30],]

现在这是 html 代码:

$(document).ready(function() {
Highcharts.setOptions({
global: {
        useUTC: false
        }   
});
chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            //defaultSeriesType: 'spline',
        },
        title: {
            text: 'Live random data'
        },
        events:{
            load: refreshChart()
        },
        xAxis: {
            type: 'datetime',
        },
        tooltip: {             
            valueSuffix: ' C'
        },
        yAxis: {
            type: 'linear',
                title: {
                    text: 'Temperature ( C)'
      },
    },
        series: [{}]
    });

$.getJSON("index.php", function(json) {    /*Get the array data in data.php using jquery getJSON function*/
    options.series[0].data = json;        /*assign the array variable to chart data object*/
    chart = new Highcharts.Chart(options); /*create a new chart*/
});

function refreshChart(){                 /*function is called every set interval to refresh(recreate the chart) with the new data from data.php*/
    setInterval(function(){
        $.getJSON("index.php", function(json) {
            options.series[0].data = json;
            chart = new Highcharts.Chart(options);
        });
    },6000);
}

});

但是图表没有显示任何内容？有什么帮助吗？

Answer 1

解决了!!我刚刚在index.php 中转换了数组的输出。

$output[] = array(((float)($row["time"])),((int)($row["temperature"])));

这样时间戳和温度值都是有效的json。