हाईचार्ट्स सेट डेटा पर लोडिंग एनीमेशन कैसे दिखाएं

Question

मेरे पास उच्चतर ग्राफिक्स हैं। जब मैं अपने पेज बना रहा खाली ग्राफिक्स दिखाने (मैं डेटा विशेषता निर्धारित नहीं है और वहाँ ग्राफिक्स के केवल शीर्षक है, उनमें से अंदर खाली है।) मैं अतुल्यकालिक रूप से सर्वर से डेटा प्राप्त और

setData (कॉल)

कॉलबैक पर फ़ंक्शन। हालांकि उपयोगकर्ता एक खाली पृष्ठ देखता है और मैं उनके लिए एक लोडिंग छवि दिखाना चाहता हूं। यह: http://api.highcharts.com/highcharts#loading मेरे लिए काम नहीं करता है।

कोई विचार?

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

Answer 1

मैं इसे के रूप में दिए गए URL के समझाया काम किया है।

चलो कहते हैं कि यह हमारा कंटेनर

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

है और यह ajax का टुकड़ा है कि दिखाने के लिए जब getJSON चार्ट के लिए शुरू होता है और छुपाने बंद हो जाता है ख्याल रखता है करते हैं।

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

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

Answer 2

यह एक सरल टुकड़ा मैं हमेशा लोड हो रहा है दिखाने के लिए उपयोग करते हैं:

Answer 3

आप इस प्लगइन JQuery Block UI

और उपयोग का उपयोग कर प्रत्येक पृष्ठ के लिए विश्व स्तर पर परिभाषित कर सकते हैं

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

}); 

Answer 4

"लोड हो रहा है .." है शब्द भी शौकिया लगता है। इसके बजाय उस चाल का उपयोग करें

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

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