javascript - 将来自响应服务器 JSON 的标签 "series:"添加到 Highcharts 中

Question

我尝试使用 Highcharts 创建图表，但无法使用 PHP 从服务器返回的响应填充“系列”字段。答案是 JSON 格式。图表未渲染，它变成白色背景。我传递服务器返回的 highchart JSON 代码和行。预先非常感谢您。我是新手，请大家多多指教。 我向她粘贴了 2 个代码:

服务器端 PHP:

$arr = array();
while ($row_RecordsetTabla = mysql_fetch_assoc($RecordsetTabla))
{
    $fecha = $row_RecordsetTabla['fecha'];
    $hora = $row_RecordsetTabla['hora'];
    $estado = $row_RecordsetTabla['estado'];
    $arregloFecha = date_format(new DateTime($fecha),"Y,m,d");
    $arregloHora = date_format(new DateTime($hora),"H,i");
    $arr[] = array("Date.UTC(".$arregloFecha.",".$arregloHora.")", $estado);
}
$arr2[] = array('data' => $arr);
echo json_encode($arr2);

响应服务器 JSON:

[{"data":[["Date.UTC(2014,03,27,12,00)","2"],["Date.UTC(2014,04,01,19,10)","1"],  ["Date.UTC(2014,04,01,15,44)","1"]]}]

客户端 JavaScript HIGHCHARTS 代码:

$.get("mostrarStatsDispositivo.php", {idDispositivo:"2", numeroDispositivo:"hola"}, function(data){
    chart = new Highcharts.Chart({
        chart: {`enter code here`
            renderTo: 'divStatsDispositivo',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        title: {
            text: 'Gráfica de actividad'
        },
        tooltip: {
            enabled: false,        
        },

        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats : {
                hour: '%H',
            }   
        },

        yAxis: {
            categories: [ 'APAGADO', 'ACTIVO', 'ALARMA'],   
            title: {
                text: 'ESTADO'
            },
            min: 0
        },

        series : [{
            name : 'grafica',
            type : 'line',
            data : data,  //<--------- NOT WORKING?¿
        }]
    });
},"json");

...谢谢!

Answer 1

您遇到了一些问题:

• 您想要的数据实际上是data[0].data
• 您的数据不是字符串数据，而是用引号括起来。
• Highcharts 要求日期时间数据按顺序排列(您的数据则不然)。

当我改变这些东西时，它起作用了:

$(function () {
    var data = [{"data":[[Date.UTC(2014,03,27,12,00),2],[Date.UTC(2014,04,01,15,44),1],  [Date.UTC(2014,04,01,19,10),1]]}],
        chart = new Highcharts.Chart({
        chart: {
            renderTo: 'divStatsDispositivo',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        title: {
            text: 'Gráfica de actividad'
        },
        tooltip: {
            enabled: false,        
        },

        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats : {
                hour: '%H',
            }   
        },

        yAxis: {
            categories: [ 'APAGADO', 'ACTIVO', 'ALARMA'],   
            title: {
                text: 'ESTADO'
            },
            min: 0
        },

        series : [{
            name : 'grafica',
            type : 'line',
            data : data[0].data, 
        }]
    });
});

http://jsfiddle.net/fUhEj/1/