最近我接到一個開發任務,要求就“售後服務客戶滿意度調查問卷表”裡客戶填寫的回報答案做一個統計。
問題的例子如下:
- 您最後一次是何時購買了我們的産品?
- 服務人員服務态度是否友好、工作盡職盡責?
- 您對我公司提供的售後服務總體感覺如何?
。。。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiADNyEzLcd3LcJzLcJzdllmVldWYtl2Q3UCcpJHdz9CX05WZpJ3bt8Gd1F2LcJjcn9WTldWYtl2PiVzYjJjNwIGZwgDN3EzMk1SM5cTN4AjMvw1cldWYtl2XkF2bsBXdvw1bp5SdoNnbhlmauMXZnFWbp1CZh9GbwV3Lc9CX6MHc0RHaiojIsJye.jpg)
我要實作的功能是出一個報表,在同一個頁面顯示對于每個問題,每個答案的總共出現次數。
我實作了一個簡單的效果,如下圖所示:
當然六個圖示用的都是一模一樣的測試資料,主要解決了多個圖表出現在同一個頁面裡的布局問題。
大家用下面這個連結測試下效果。用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的原創技術文章,請關注公衆号"汪子熙"