在同一頁面顯示多個(gè)JavaScript統(tǒng)計(jì)圖表

olle 發(fā)布于2019-08-23 12:33 / 1926人閱讀

摘要：我要實(shí)現(xiàn)的功能是出一個(gè)報(bào)表，在同一個(gè)頁面顯示對(duì)于每個(gè)問題，每個(gè)答案的總共出現(xiàn)次數(shù)。第一個(gè)負(fù)責(zé)用個(gè)餅狀圖來顯示問題的結(jié)果，第二個(gè)里的個(gè)則顯示柱狀圖。之所以除以而不除以是為了給每一行的統(tǒng)計(jì)圖之間預(yù)留一些空隙。

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

問題的例子如下：

您最后一次是何時(shí)購(gòu)買了我們的產(chǎn)品？

服務(wù)人員服務(wù)態(tài)度是否友好、工作盡職盡責(zé)？

您對(duì)我公司提供的售后服務(wù)總體感覺如何？

。。。

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

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

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

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

http://i042416.github.io/Fior...

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

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

兩個(gè)div里各包含了6個(gè)canvas。第一個(gè)div負(fù)責(zé)用6個(gè)餅狀圖來顯示問題的結(jié)果，第二個(gè)div里的6個(gè)canvas則顯示柱狀圖。每個(gè)canvas我用了標(biāo)注成!important的display:inline屬性，來強(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)前窗口總的寬度通過body節(jié)點(diǎn)的clientWidth屬性來獲得，然后除以6.5，商即為每個(gè)統(tǒng)計(jì)圖的寬度。之所以除以6.5而不除以6是為了給每一行的統(tǒng)計(jì)圖之間預(yù)留一些空隙。

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

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