使用ajax非同步請求資料並顯示到圖示中，當每頁顯示圖示數量或者資料列越多時，渲染越慢，等待時間更多，最終造成了頁面的假死狀態(頁面在完成資料請求和渲染新圖之前沒什麼動靜)。為了防止假死狀態，更為了更好的使用者體驗，hightcharts提供了載入中動畫配置。

1.hightcharts預設不開啟載入中動畫效果，是需要顯示呼叫指定函式，才能開啟或者關閉載入中動畫。

var res = $('#id').highcharts();//獲取highcharts物件
res.showLoading();//開啟載入中動畫效果
//res.hideLoading();//隱藏載入中動畫效果 

效果圖如下：

2..hightcharts自定義載入中動畫設定：

想要自定義載入中動畫效果，主要運用了hightcharts的以下配置：

A.關於顯示的載入中文字的全域性配置：

//Highcharts 全域性配置，可複製貼上直接使用
Highcharts.setOptions({
    // 所有語言文字相關配置都設定在 lang 裡
    lang: {
        loading: '資料載入中...'//設定載入動畫的提示內容，預設為'Loading...'，若不想要文字提示，則直接賦值空字串即可
    }
});

$('#id').highcharts({
                loading: {
                    style: {
                        position: 'absolute',//預設值
                        opacity: 0.5,//透明度
                        textAlign: 'center',//文字顯示方式
                        //backgroundColor: 'gray',//背景色
                        backgroundImage: 'url("../Content/images/drip.gif")',//顯示的背景動態gif圖片，設定此項為gif圖片即可實現常見的載入中動態效果圖
                        backgroundSize: '100% 100%'//設定背景圖片鋪滿Series資料列區域
                    }
                }
});
 

這裡是截圖，所以看不到gif的動畫效果，這裡貼出gif原圖連結：可愛喵喵