在同一頁面顯示多個JavaScript統計圖表

最近我接到一個開發任務，要求就“ 售後服務客戶滿意度調查問卷表”裡客戶填寫的反饋答案做一個統計。

問題的例子如下：

• 您最後一次是何時購買了我們的產品？

• 服務人員服務態度是否友好、工作盡職盡責？

• 您對我公司提供的售後服務總體感覺如何？

。。。

我要實現的功能是出一個報表，在同一個頁面顯示對於每個問題，每個答案的總共出現次數。

我實現了一個簡單的效果，如下圖所示：

當然六個圖示用的都是一模一樣的測試資料，主要解決了多個圖表出現在同一個頁面裡的佈局問題。

大家用下面這個連結測試下效果。用Chrome開發者工具即可檢視093_chart.html的實現。

http://i042416.github.io/FioriODataTestTool2014/WebContent/093_chart.html

手機上開啟的效果。

簡單過一下程式碼：

兩個div裡各包含了6個canvas。第一個div負責用6個餅狀圖來顯示問題的結果，第二個div裡的6個canvas則顯示柱狀圖。每個canvas我用了標註成!important的display:inline屬性，來強制讓這些位於canvas節點裡的統計圖從左到右顯示，而不是預設的每顯示一個就換行。

function loaded(){   var totalWidth = getBodyNode().clientWidth;   console.log("width in load: " + totalWidth);   var aCharts = document.getElementsByTagName("canvas");   for( var i = 0; i < aCharts.length; i++){
         aCharts[i].width = totalWidth / 6.5;
   }   var option = {       type: "pie",       xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],       yAxisData: [12, 19, 3, 5, 2, 3],       yAxisLabel: "Number of Votes"
   };   for( var i = 1; i <= 6; i++ ){
         createChartOnCanvas("myChart" + i, option);
   }
   option.type = "bar";   for( var i = 1; i <= 6; i++ ){
        createChartOnCanvas("barChart" + i, option);
   }
}

第41行把當前視窗總的寬度通過body節點的clientWidth屬性來獲得，然後除以6.5，商即為每個統計圖的寬度。之所以除以6.5而不除以6是為了給每一行的統計圖之間預留一些空隙。

統計圖的型別，X和Y座標的資料和標籤通過option物件傳入到函式createChartOnCanvas中。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2213997/，如需轉載，請註明出處，否則將追究法律責任。