我卡住了!

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

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

图表选项:

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 个字段，有了这个，图形工作完美，现在我只想知道这样做是否可以。

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 = []; // <---------------------- 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 是一个数组。所以，它可能看起来或者如下 -

[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 JSON Highcharts 加载数据库结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7810098/