PHP JSON Highcharts加载数据库结果 [英] PHP JSON Highcharts load database result

问题描述

我卡住了！

我需要用json结果创建highchart。我找到了一些来源，但不能把这个工作。

最近我可以得到的是这样做：

图表选项：

  var options = {
 chart：{
 renderTo：'tudo'，
 defaultSeriesType：'column'，
 rightMargin：80 
}，
 
 title：{
 text：'Weekdays '
}，
 subtitle：{
 text：'来源：日历中的某处
}，
 
 xAxis：{
标签：{
 enabled：false 
} 
}，
 
 yAxis：[
 {
 min：0，
 title： {
 text：'Amount'
} 
}，
 {
 linkedTo：0，
 opposite：true 
} 
 ]，
 
系列：[] 
}; 
  

ajax call ：

  $。getJSON（'ajax / calc.ajax.php'，function（data）{
 
 var series = []; 
 
 $ .each（data，function（key，value）{
 
 series.name = key; 
 series.data = value; 
 
 .series.push（name）; 
}）; 
 
 var chart = new Highcharts.Chart（options）; 
}）; 
  

highchart加载确定，并使用 Series 1，Series 2填充系列。 ...

但没有图形，他保持空白。 （类似这样： 演示 ）。

要知道我是否缺少某些东西或一切。

感谢

update：我改变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调用中，       -  
  $。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）; 
}）; 
  
因此，如下 -  
  $。getJSON（'ajax / calc.ajax.php'，function（data）{
 $ .each（data，function（key，value）{
 var series = {}; //< -------------------- move and changed to object 
 series.name = key; 
 series.data = value; 
 options.series.push（series）; //< --------推送序列对象
}）; 
 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??} 
 
 
 c $ c> $。each   -  
  series.data = value; 
  
没有意义。
 
 
 
 strong> series.data 是一个数组。因此，它可能如下 ：
  [y1，y2，y3，... ..] //数组数组（它们是y值）
  
  >如下 -  
  [[x1，y1]，[x2，y2]，[x3，y3]，... 。] //数字对数组数组（x和y值）
  
  如下 -  
  //可以有x和y值作为属性的对象数组
 [ {
 name：'Point 1'，
 color：'＃00FF00'，
y：0 
}，{
 name：'Point 2'，
 color：'＃FF00FF'，
y：5 
}] 
  
 
 
 ，请确保您的PHP代码生成的JSON匹配上面的一个数组，然后 series.data = value 在您的 $。 
 更新： 
对不起，我做Java，从来没有做过PHP。不能帮助你很多与PHP。 
  header（'Content-类型：application / json'）; 
 $ return_data = array（
 array（10,20），array（20,30），array（56,30），array（50，20）），
 array （10,0），阵列（20,10），阵列（56,100），阵列（50,40））
）; 
 echo json_encode（$ return_data）; 
  
 更新： > 
 
 
  $。getJSON（'ajax / calc.ajax.php'，function（data）{
 var series = {// < --------------------只创建一个系列对象
类型：'pie'，
 data：[] //数据数组新系列
}; 
 $ .each（data，function（key，value）{
 series.data.push（[key，value [0]]）; 
} ）; 
 options.series.push（series）; //< --------推送系列对象
 var chart = new Highcharts.Chart（options）; 
} ）; 
  
这应该画饼图。
 
I'm stuck!

I need to create highchart with json result. I found some sources here but can't put this to work.

The closest I can get was doing this:

Chart options:
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 call:
$.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 loads ok, and fills the series with Series 1, Series 2 ....

but no graphic is made, he keeps blank. ( something like this: Demo).

wanna know if I'm missing something or everything.

Thanks

update: i change the sql, now i'm working with 2 fields, and with this, the grafic work perfect, now i just want to know if doing like this its ok.
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);

解决方案
In your ajax call -
$.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);  
});
So, it would be as follows -
$.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);  
});
Also, considering the JSON you are receiving -

  
{"nome":"TRANSFORMADOR 250VA 0-230-380V / 0,24V-0-48V","modelo":"TRANSFORMADOR","marca":"SEIT","valor":"318.87|542.08","qtdade":"0"??}
what you are doing in the $.each -
series.data = value;
does not make sense.

series.data is an array. So, it could look like either as follows -
[y1, y2, y3, ....] // array of numbers (which are y values)
or as follows -
[[x1, y1], [x2, y2], [x3, y3], ....] // array of arrays of pair of numbers (x and y values)
or as follows -
// 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
}]
So, make sure that your PHP code produces a JSON that matches an array of one of the above, then series.data = value inside your $.each will work.

Update:
Sorry, I do Java and have never done PHP so can't help you much with PHP. But, can you try with the following as your PHP, just to see if the chart shows up?
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);
Update: To render pie while keeping the same 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);  
});
This should draw pie chart.

                        
这篇关于PHP JSON Highcharts加载数据库结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！