Highcharts如何在設置數據顯示加載動畫

Question

我有很高的圖形。當我創建我的網頁我表明空圖形（我不設置數據屬性，只有圖形的標題，他們裏面是空的。）我從服務器獲取數據不同步，並呼籲

使用setData（）

在回調函數。但是，用戶看到一個空白頁面，我想爲他們顯示一個加載圖像。這：http://api.highcharts.com/highcharts#loading不適合我。

任何想法？

Answer 1

我做到了工作在給定的URL作爲解釋：

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

Answer 2

這是一個簡單的一塊，我總是用它來顯示加載。

讓我們說這是我們的集裝箱

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

這是一塊AJAX的是細心地表明，當開始的getJSON爲圖表和隱藏，當它停止。

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

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

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