Domanda

Sono bloccato!

Ho bisogno di creare highchart con esito JSON. Ho trovato alcune fonti qui, ma non posso mettere questo al lavoro.

Il più vicino che posso ottenere stava facendo questo:

Opzioni Grafico:

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: []
};

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

carichi highchart ok, e riempie la serie con Series 1, Series 2 ....

, ma non grafica è fatto, continua a vuoto. (Qualcosa di simile a questo: Demo ).

vogliono sapere se mi manca qualcosa o tutto.

Grazie

Aggiornamento:. Cambio lo sql, ora sto lavorando con 2 campi, e con questo, il perfetto lavoro Grafic, ora voglio solo sapere se facendo in questo modo il suo 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);
È stato utile?

Soluzione

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

Quindi, sarebbe la seguente -

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

Inoltre, considerando il JSON si stanno ricevendo -

{ "nome": "TRANSFORMADOR 250VA 0-230-380V / 0,24V-0-48V", "modelo": "TRANSFORMADOR", "Marca": "SEIT", "valor": "318,87 | 542,08 ", "qtdade": "0" ??}

quello che state facendo nel $.each -

series.data = value;

non ha senso.

series.data è un array. Quindi, si potrebbe apparire come o come segue -

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

o come segue -

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

o come segue -

// 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
}]

Quindi, assicuratevi che il vostro codice PHP produce un JSON che corrisponde a un array di uno di quanto sopra, quindi series.data = value all'interno del vostro $.each funzionerà.

Aggiornamento: Siamo spiacenti, faccio Java e non ho mai fatto PHP quindi non si può aiutare molto con PHP. Ma, si può provare con il seguente come PHP, solo per vedere se il grafico si presenta?

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

Aggiornamento:. Per rendere la torta, mantenendo lo stesso 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);  
});

Questo dovrebbe disegnare grafico a torta.

Altri suggerimenti

Sembra che le bugie problema nel codice PHP. Highcharts prevede una serie di seguire un particolare formato . Nel tuo caso, le cose funzionano (in parte) a causa name è uno dei campi si sta cercando. I dati, tuttavia, ha bisogno di essere in uno dei tre formati:

  • Un array di valori di y (esempio [0, 1, 2])
  • Un array di array (valori X, Y, per esempio [[0,0], [1,1], [2,2]])
  • Un array di oggetti che soddisfano utilizzando proprietà del punto

Si vorrebbe l'ultimo formato, credo. Ad esempio:

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

Per ottenere il codice di lavoro, potrebbe essere necessario cambiare l'interno della vostra funzione $.each a qualcosa di simile a questo:

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

    series.data = {
        y: value.property_you_are_interested_in
    };

    options.series.push(name);
});

... naturalmente, se si voleva utilizzare una delle altre forme, sarebbe piuttosto facile così:

//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);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top