在同一頁面顯示多個JavaScript統計圖表
阿新 • • 發佈:2018-10-20
cimage href auto class body yellow 效果 兩個 簡單的
最近我接到一個開發任務,要求就“售後服務客戶滿意度調查問卷表”裏客戶填寫的反饋答案做一個統計。
問題的例子如下:
- 您最後一次是何時購買了我們的產品?
- 服務人員服務態度是否友好、工作盡職盡責?
- 您對我公司提供的售後服務總體感覺如何?
。。。
我要實現的功能是出一個報表,在同一個頁面顯示對於每個問題,每個答案的總共出現次數。
我實現了一個簡單的效果,如下圖所示:
當然六個圖標用的都是一模一樣的測試數據,主要解決了多個圖表出現在同一個頁面裏的布局問題。
大家用下面這個鏈接測試下效果。用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的原創技術文章,請關註公眾號"汪子熙"或者掃描下面二維碼:
在同一頁面顯示多個JavaScript統計圖表