PHP JSON Highcharts результат загрузки базы данных

Question

Я застрял!

Мне нужно создать хай-чарт с результатом json.Я нашел некоторые источники здесь, но не могу заставить это работать.

Самое близкое, что я могу получить, это:

Параметры диаграммы:

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);  
});

старшая диаграмма загружается нормально и заполняет серию Series 1, Series 2 ....

, но графика не создается, он остается пустым.(что-то вроде этого: Демо ).

хочу знать, что я что-то упускаю или все.

Спасибо

обновление: я изменяю 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);

Answer 1

В вашем вызове 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, который соответствует массиву одного из вышеперечисленных, тогда series.data = value внутри вашего $.each будет работать.

Обновление: Извините, я занимаюсь 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);  
});

Это должно нарисовать круговую диаграмму.

Answer 2

Похоже, проблема в вашем PHP-коде. Highcharts ожидает, что серия будет следовать определенному формату . В вашем случае все получается (частично), потому что name - это одна из областей, которую он ищет. Однако данные должны быть в одном из трех форматов:

• Массив значений y (например, [0, 1, 2])
• Массив массивов (значения x, y; например, [[0,0], [1,1], [2,2]])
• Массив объектов, встречающихся с использованием свойств точки

Вы бы хотели последний формат, я думаю. Например:

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);