webentwicklung-frage-antwort-db.com.de

Highcharts So zeigen Sie das Laden von Animationen bei festgelegten Daten an

Ich habe Highcharts-Grafiken. Wenn ich meine Seite erstelle, zeige ich leere Grafiken (ich setze kein Datenattribut und es gibt nur Titel von Grafiken, in denen leer ist.) Ich erhalte Daten vom Server asynchron und rufe auf

setData ()

funktion beim Rückruf. Der Benutzer sieht jedoch eine leere Seite und ich möchte ein Ladebild für sie anzeigen. Dies: http://api.highcharts.com/highcharts#loading funktioniert bei mir nicht.

Irgendwelche Ideen?

javascriptjqueryhighcharts
12
kamaci

Ich habe es wie unter der angegebenen URL beschrieben gemacht:

function updateGraphic(url, chartName) {
    chartName.showLoading();
    $.getJSON(url, function(data){
        chartName.series[0].setData(data);
        chartName.hideLoading();
    });
}
17
kamaci

"Loading .." Word scheint zu amateurhaft. Verwenden Sie stattdessen diesen Trick

var chart = new Highcharts.Chart(options);
chart.showLoading('<img src="/images/spinner.gif">');

$.getJSON(url, function(data){
       //load data to chart
       chart.hideLoading();
});
13
Kadir Can

Dies ist ein einfaches Stück, das ich immer benutze, um das Laden zu zeigen.

nehmen wir an, das ist unser Container

<div id='container'>
  <img id="spinner" src="/assets/chart_loader.gif"/>
</div>

Und dies ist die Ajax-Komponente, die darauf achtet, anzuzeigen, wann der getJson für das Diagramm startet, und zu verbergen, wenn er stoppt.

$(document).ajaxStart ->
  $("#spinner").show()

$(document).ajaxComplete ->
  $("#spinner").hide()
5
AnkitG

Mit diesem Plugin können Sie global für jede Seite definieren. JQuery Block UI

und Verwendung ist

  jQuery(document).ready(function ($) {
        $.ajaxSetup({ cache: false });
        $(document).ajaxStart(function () {
        $('body').block({
            message: '<h3><img alt="" class="GifIcon" src="Images/319.gif" />Please wait Data is Loading From Server ...... </h3>'
        });
    });
    $(document).ajaxStop(function () {
        $('body').unblock();
    });

});
0
alhashmiya