将标记“series:”添加到响应服务器 JSON 中的 Highcharts 中

Add tag "series:" into Highcharts, from the response server JSON

本文关键字：服务器 响应 JSON 中的 Highcharts 添加 series      更新时间：2023-09-26

我尝试使用Highcharts创建一个图表，但我无法使用PHP从服务器返回的响应填充字段"series"。答案是 JSON 格式。图表不呈现，它变为白色背景。我传递服务器返回的高图表 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");

....谢谢！

你遇到了几个问题：

  • 您想要的数据是actually 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/

相关文章：