我們接著上一章內容繼續講解amCharts的時間解析功能。首先講使用不同方式格式化日期。

用不同方式格式化日期

你很有可能會使用不同的日期格式，例如：我想要日期數在月份的旁邊，第一個年份不以其他格式顯示。在上一章，我們說過amCharts JavaSctipt圖表的 CategoryAxis有多種日期格式屬性（dateFormats）。他們的默認值為：

[{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN'},{period:'hh',format:'JJ:NN'},{period:'DD',format:'MMM DD'},{period:'WW',format:'MMM DD'},{period:'MM',format:'MMM'},{period:'YYYY',format:'YYYY'}]

為了達到我想要的格式，我們需要修改";MM"（month）和"YYYY"（year），如下：

categoryAxis.dateFormats = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN'},{period:'hh',format:'JJ:NN'},{period:'DD',format:'MMM DD'},{period:'WW',format:'MMM DD'},{period:'MM',format:'MMM YYYY'},{period:'YYYY',format:'MMM YYYY'}];

我將"MM"和"YYYY"變成這樣 "MMM YYYY"，結果如下圖：

 使用amCharts JavaScript圖表是不是很簡單，如果你想去掉年份加粗設置，輸入以下代碼：

categoryAxis.boldPeriodBeginning = false;

空白數據處理

設想一下，你想要可視化的的數據只是工作日，周末沒有數據，但是老板又要求將周末顯示在圖表上。你怎么做呢？很簡單，你只需要將周末的數據添加成空數據點即可。但是，如果間隔很大，隨意性很強的數據呢？

這里就不得不說amCharts JavaScript圖表的優勢了，強大的自動時間解析功能，可以把這些問題一勞永逸地解決。

我們來看看沒有數據的周末顯示圖表：

在圖中，有的地方間隔比較大，是因為在坐標軸中顯示了日期，但是該日期卻沒有數據。

如果你想要把沒有數據點的數據都顯示出來，你可以設置AmGraph 屬性為"false"（ graph.connect = false），結果如下圖：

如果你想要所有數據點在等時間間隔顯示，將周末從坐標軸上移除。你可以做如下設置：

categoryAxis.equalSpacing = true;

JavaScript Charts下載

Javascript Stock Chart下載