最近我接到一個(gè)開(kāi)發(fā)任務(wù)，要求就“售后服務(wù)客戶(hù)滿(mǎn)意度調(diào)查問(wèn)卷表”里客戶(hù)填寫(xiě)的反饋答案做一個(gè)統(tǒng)計(jì)。

問(wèn)題的例子如下：

• 您最后一次是何時(shí)購(gòu)買(mǎi)了我們的產(chǎn)品？
• 服務(wù)人員服務(wù)態(tài)度是否友好、工作盡職盡責(zé)？
• 您對(duì)我公司提供的售后服務(wù)總體感覺(jué)如何？

。。。

我要實(shí)現(xiàn)的功能是出一個(gè)報(bào)表，在同一個(gè)頁(yè)面顯示對(duì)于每個(gè)問(wèn)題，每個(gè)答案的總共出現(xiàn)次數(shù)。

我實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的效果，如下圖所示：

當(dāng)然六個(gè)圖標(biāo)用的都是一模一樣的測(cè)試數(shù)據(jù)，主要解決了多個(gè)圖表出現(xiàn)在同一個(gè)頁(yè)面里的布局問(wèn)題。

大家用下面這個(gè)鏈接測(cè)試下效果。用Chrome開(kāi)發(fā)者工具即可查看093_chart.html的實(shí)現(xiàn)。

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

手機(jī)上打開(kāi)的效果。

簡(jiǎn)單過(guò)一下代碼：

兩個(gè)div里各包含了6個(gè)canvas。第一個(gè)div負(fù)責(zé)用6個(gè)餅狀圖來(lái)顯示問(wèn)題的結(jié)果，第二個(gè)div里的6個(gè)canvas則顯示柱狀圖。每個(gè)canvas我用了標(biāo)注成!important的display:inline屬性，來(lái)強(qiáng)制讓這些位于canvas節(jié)點(diǎn)里的統(tǒng)計(jì)圖從左到右顯示，而不是默認(rèn)的每顯示一個(gè)就換行。

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行把當(dāng)前窗口總的寬度通過(guò)body節(jié)點(diǎn)的clientWidth屬性來(lái)獲得，然后除以6.5，商即為每個(gè)統(tǒng)計(jì)圖的寬度。之所以除以6.5而不除以6是為了給每一行的統(tǒng)計(jì)圖之間預(yù)留一些空隙。

統(tǒng)計(jì)圖的類(lèi)型，X和Y坐標(biāo)的數(shù)據(jù)和標(biāo)簽通過(guò)option對(duì)象傳入到函數(shù)createChartOnCanvas中。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:

總結(jié)

以上是生活随笔為你收集整理的在同一页面显示多个JavaScript统计图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。