在制作的復雜圖表，是否會遇到加載很費時間的情況呢？如果有，那么，你需要讓你的用戶知道圖表正在加載中，他們需要做的只是在等待一會。解決這個問題，我們常用的方法就是在加載的時候顯示進度條。今天，我們就在圖表來看一看如何在圖表加載的時候顯示進度條的方法。那么，我們制作一個基本的圖表，開始今天的學習吧。

注意：以下示例可用于Javascript/HTML5 Stock Chart

上圖比較簡單，沒有大家期望的那樣美觀實用，不過作為一個例子，已經完全夠用了。這是一個基于日期的圖標記錄。其中有100個區域圖，每一個區域有500個數據點，如果你也想自己試一試，下面有提供代碼：

var chart;
var chartData = [];

// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);

for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);

var dataPoint = {
date: newDate
};

// generate values for 50 graphs
for (var c = 0; c < 100; c++) {
dataPoint['value'+c] = Math.round(Math.random() * 40) - 20;
}

chartData.push(dataPoint);
}
}

// creat chart
AmCharts.ready(function() {
// generate some data
generateChartData();

// SERIAL CHART 
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "//www.amcharts.com/lib/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";


// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelsEnabled = false;
categoryAxis.ignoreAxisWidth = true;
categoryAxis.axisAlpha = 0;

// value 
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.dashLength = 1;
chart.addValueAxis(valueAxis);

// GRAPH
for (var c = 0; c < 100; c++) {
var graph = new AmCharts.AmGraph();
graph.valueField = "value"+c;
graph.bullet = "round";
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.lineAlpha = 0.5;
graph.fillAlphas = 0.5;
graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph);
}

// WRITE
chart.write("chartdiv");
});

在Google Chrome中，普通電腦渲染該圖表大約5秒，然后我們寫一段HTML代碼。我們將把圖表容器"包裝"(chartdiv) 下，放入一些父容器中。我們也可以建立一些同樣大小的新容器，代碼如下：

style="width: 400px;
height: 300px;
position: relative;">
<div id="chartcurtain"
style="width: 400px;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
 text-align: center;
line-height: 300px;
font-size: 20px;">
Loading chart...
</div>
<div id="chartdiv"
style="width: 400px;
height: 300px;
z-index: 50;"></div>
</div>

代替圖表加載進度條中的內容，你可以在HTML中更改。比如加載進度條圖片，小貓打盹的圖片或者其他任何你喜歡的東西。

然后我們來看看重新加載頁面的效果:

一切都按照我們期望的進行著，我們再看看加載圖表的效果（圖表加載中，進度條出現了）：

最后，我們需要在圖表加載完成之后，移除進度條。在"rendered"事件中有我們需要的所有圖表類型可以幫助我們完美完成這一步。
代碼：

chart.addListener("rendered", function (event) {
document.getElementById("chartcurtain").style.display = "none";
});
If you have jQuery, you can make the loading text to gently fade out:

chart.addListener("rendered", function (event) {
$("#chartcurtain").fadeOut(1000);
});