ajax - from - highcharts json tutorial



Laden Sie Daten mit Ajax in Highcharts (2)

Ich versuche, hohe Diagramme beim Laden der Seite zu aktualisieren und bei einem Menüwechsel mit JQUERY AJAX call. Es werden Daten im Format [[10,1228800000], [10,1228800000]] zurückgegeben. Das Diagramm ist leer und zeigt keine der Daten an.

Versuchte mehrere Lösungen hier, aber keine funktionierte.

var chart;
        $(document).ready(function() {


            var options = {
                chart: {
                    renderTo: 'stats',
                    defaultSeriesType: 'spline'
                },
                title: {text:''},
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {},
                series: []
            };
    var month = 'July';
    $.ajax({
        type: "POST",
        data: "month="+month,
        url: "update_visits_chart",
        success: function (data) {

            options.series.push(data);
            chart = new Highcharts.Chart(options);
        }
    });

Irgendwelche Fehler? Danke im Voraus. BEARBEITEN:

NEUESTE CODE NOCH NICHT ARBEITEND:

var options = {

            chart: {
                renderTo: 'stats',
                type: 'spline'
            },
            title: {
                text: ''
            },
            xAxis: {

                type:'datetime',
                tickInterval: 30 * 24 * 3600 * 1000,
                dateTimeLabelFormats: {
                    day: '%b %e'
                },
                labels: {
                    rotation: -45,
                    align: 'right'
                }
            },
            yAxis: {
                title: {
                    text: 'Number of visits'
                },
                min: 0
            },
            tooltip: {
                formatter: function() {
                        return Highcharts.dateFormat('%b %e', this.x) +'<br />'+this.y+' visit(s)';
                }
            },
            legend: {
                enabled: true
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Number of Visits',
                data: []
            }]
        };
        var month = 'July';
        $.ajax({
            type: "POST",
            url: "update_visits_chart",
            data: "month="+month,
            success: function(data){
                options.series[0].data = data;
                chart = new Highcharts.Chart(options);
            }
        });

Answer #1

Sie müssen data direkt in Serie setzen, da data bereits ein mehrdimensionales Array sind.
Der folgende Code wird es beheben.
Ändern Sie options.series.push(data); zu options.series = data;


Answer #2

Sie müssen die setData-Methode des Serienobjekts wie in der Dokumentation beschrieben verwenden. In Ihrem Fall ist es options.series[0].setData(Data)

Und ich denke, Sie müssen Ihr Ajax-Ergebnis von einem String in ein reales Objekt / Array JSON.parse(data) indem Sie JSON.parse(data) .

BEARBEITEN : @Ricardo Lohmann: Im ajax-call hat er den dataType nicht angegeben, den er in der Antwort erwartet, also wird jQuery den dataType erraten. Aber es wird keine Zeichenfolge erkennen, die mit [ als JSON beginnt, und ich bezweifle, dass seine Antwort mit der korrekten Mime-Typ- application/json . Wenn Sie also den richtigen Mime-Typ angeben, sollte das Problem ebenfalls gelöst werden. Aber ich habe kein Beispiel für die vollständige Ajax-Antwort des Fragestellers. Also rate ich auch.

Ich würde den folgenden Ajax-Aufruf empfehlen:

$.ajax({
    type: "POST",
    url: "update_visits_chart",
    data: {month: month},
    dataType: 'json',
    success: function(data){
        options.series[0].setData(data);
    }
});

@Jugal Thakkar

$.getJSON ist nur eine Abkürzung für den obigen $.getJSON -Aufruf, aber es ist weniger flexibel, weil Sie weniger Optionen haben.





highcharts