javascript - 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

「読み込み中…」という言葉が素人すぎる。代わりにそのトリックを使用してください

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

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

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

});