web-dev-qa-db-ja.com

ハイチャートセットデータで読み込み中のアニメーションを表示する方法

ハイチャートのグラフィックがあります。ページを作成すると、空のグラフィックが表示されます（データ属性を設定せず、グラフィックのタイトルのみがあり、内部は空です）。サーバーから非同期でデータを取得し、呼び出します。

setData（）

コールバック時の関数。ただし、ユーザーに空のページが表示され、読み込み中の画像を表示したいと思います。これ： http://api.highcharts.com/highcharts#loading は私には機能しません。

何か案は？

javascriptjqueryhighcharts
13
kamaci

私は与えられたURLで説明されているようにそれを機能させました：

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

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

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

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

これは私がいつも負荷を示すために使用する単純な部分です。

これが私たちのコンテナだとしましょう

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

これは、getJsonがチャートに対して開始するタイミングを表示し、停止すると非表示にするように注意を払うajaxの一部です。

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

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

このプラグインを使用して、ページごとにグローバルに定義できます 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();
    });

});
0
alhashmiya