PHP JSON Highcharts 加载数据库结果

Posted 2023-02-24

【中文标题】PHP JSON Highcharts 加载数据库结果

【英文标题】：PHP JSON Highcharts load database result

【发布时间】：2011-12-10 05:45:08

【问题描述】：

我被困住了！

我需要用 json 结果创建 highchart。我在这里找到了一些来源，但无法使用。

我能得到的最接近的是这样做：

图表选项：

var options = 
    chart: 
        renderTo: 'tudo',
        defaultSeriesType: 'column',
        rightMargin: 80
    ,

    title: 
        text: 'Weekdays'
    ,
    subtitle: 
        text: 'Source: somewhere in a calendar'
    ,

     xAxis: 
        labels: 
            enabled: false
    
    ,

    yAxis: [
        
            min: 0,
            title: 
                text: 'Amount'
             
        ,
        
            linkedTo: 0,
            opposite: true
        
    ],

    series: []
;

ajax 调用：

$.getJSON('ajax/calc.ajax.php', function(data) 

        var series = [];

        $.each(data, function(key, value) 

            series.name = key;
            series.data = value;

            options.series.push(name);
        );

        var chart = new Highcharts.Chart(options);  
);

highchart 加载正常，并用Series 1, Series 2 .... 填充系列

但没有制作图形，他保持空白。 （类似这样的：Demo）。

想知道我是否遗漏了什么或所有东西。

谢谢

更新：我更改了 sql，现在我正在处理 2 个字段，并且有了这个，grafic 工作完美，现在我只想知道这样做是否可以。

header('Content-Type: application/json');

        while(!$res->EOF)

            //$json = array("group" => "Web", "action" => "list");
            $json[$res->fields["DESMAR"]] = array(intval($res->fields["QTD"]));
            //$json["users"] = array(array("name" => "JulioGreff", "status" => "online"));
            $res->MoveNext();
        

        echo json_encode($json);

【问题讨论】：

在您的 ajax 调用中返回的 data 是什么样的？

不知道这是不是你想要的，但返回 [object Object]

json by firebug = "nome":"TRANSFORMADOR 250VA 0-230-380V \/ 0,24V-0-48V","modelo":"TRANSFORMADOR","marca":"SEIT ","valor":"318.87|542.08","qtdade":"0"

编辑一些值："nome":"TRANSFORMADOR 250VA 0-230-380V \/ 0,24V-0-48V","valor":"318.87|542.08","qtdade":"0"，这是正确的返回

【参考方案1】：

看起来问题在于您的 PHP 代码。 Highcharts 预计会有一系列后续报道a particular format。在您的情况下，事情（部分）解决了，因为name 是它正在寻找的领域之一。但是，数据需要采用以下三种格式之一：

y 值数组（例如[0, 1, 2]） 数组数组（x、y 值；例如[[0,0], [1,1], [2,2]]） 使用point properties 相遇的对象数组

我想你会想要最后一种格式。例如：

var series = [];
series.name = "series1";
series.data = y: 10; //very minimalistic example of the object format
options.series.push(name);

要使您的代码正常工作，您可能需要将 $.each 函数的内部更改为以下内容：

$.each(data, function(key, value) 
    series.name = key;

    series.data = 
        y: value.property_you_are_interested_in
    ;

    options.series.push(name);
);

...当然，如果您想使用其他形式之一，那也很容易：

//First form (array of y values)
var series = ;
series.data = [];
$.each(data, function(key, value) 
    series.name = key;
    series.data.push(value.property_you_are_interested_in);
);
options.series.push(series);

//Second form (array of x, y values)
var series = ;
series.data = [];
$.each(data, function(key, value) 
    series.name = key;
    series.data.push([value.X_property_you_are_interested_in, value.Y_property_you_are_interested_in]);
);
options.series.push(series);

【讨论】：

注意：我只显示一个数据库结果，但正确的是返回多于一行

【参考方案2】：

在您的 ajax 调用中 -

$.getJSON('ajax/calc.ajax.php', function(data) 
    var series = []; // <---------------------- must be object not array
    $.each(data, function(key, value) 
        series.name = key;
        series.data = value;
        options.series.push(name); // <-------- it should be series not name
    );
    var chart = new Highcharts.Chart(options);  
);

所以，应该是这样的-

$.getJSON('ajax/calc.ajax.php', function(data)         
    $.each(data, function(key, value) 
        var series = ; // <-------------------- moved and changed to object
        series.name = key;
        series.data = value;
        options.series.push(series); // <-------- pushing series object
    );
    var chart = new Highcharts.Chart(options);  
);

另外，考虑到您收到的 JSON -

"nome":"TRANSFORMADOR 250VA 0-230-380V / 0,24V-0-48V","modelo":"TRANSFORMADOR","marca":"SEIT","valor":"318.87|542.08 ","qtdade":"0"??

您在$.each 中所做的事情-

series.data = value;

没有意义。

series.data 是一个数组。所以，它可能看起来像 either 如下 -

[y1, y2, y3, ....] // array of numbers (which are y values)

或如下-

[[x1, y1], [x2, y2], [x3, y3], ....] // array of arrays of pair of numbers (x and y values)

或如下-

// array of objects which can have x and y values as properties
[                       
    name: 'Point 1',
    color: '#00FF00',
    y: 0
, 
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
]

因此，请确保您的 PHP 代码生成与上述数组之一匹配的 JSON，然后您的 $.each 中的 series.data = value 将起作用。

更新： 抱歉，我做 Java 并且从来没有做过 PHP，所以对 PHP 帮助不大。但是，您可以尝试将以下内容作为您的 PHP，只是为了查看图表是否显示？

header('Content-Type: application/json');
$return_data = array(
    array(array(10, 20), array(20, 30), array(56, 30), array(50, 20)),
    array(array(10, 0), array(20, 10), array(56, 100), array(50, 40))
);
echo json_encode($return_data);

更新：在保持 PHP 不变的情况下呈现饼图。

$.getJSON('ajax/calc.ajax.php', function(data)         
    var series =  // <-------------------- create just one series object
        type: 'pie',
        data: [] //data array for new series
    ; 
    $.each(data, function(key, value) 
        series.data.push([key, value[0]]);            
    );
    options.series.push(series); // <-------- pushing series object
    var chart = new Highcharts.Chart(options);  
);

这应该绘制饼图。

【讨论】：

只是一个注释，我不知道 php 是否有权，将修改问题（php 部分）以仅显示必要的内容。

你能给我看一个php的例子吗？系列正在工作。

我在这里尝试了一些东西，我将 php 更改为这个，yAxis 出现了，但我不明白这个过程：$return_data = array('valor' => '15');

是的，同时我在这里做了一些事情，并且工作，将更新主要问题，看看并告诉我它是否好！ :) - 编辑：检查更新

@ric_bfa：你能展示一下你的新 PHP 生成的最终 json 吗？