在同一頁面顯示多個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中。

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: