在同一頁面顯示多個JavaScript統計圖表

olle 發布于2019-08-23 12:33 / 1921人閱讀

摘要：我要實現的功能是出一個報表，在同一個頁面顯示對于每個問題，每個答案的總共出現次數。第一個負責用個餅狀圖來顯示問題的結果，第二個里的個則顯示柱狀圖。之所以除以而不除以是為了給每一行的統計圖之間預留一些空隙。

最近我接到一個開發任務，要求就“售后服務客戶滿意度調查問卷表”里客戶填寫的反饋答案做一個統計。

問題的例子如下：

您最后一次是何時購買了我們的產品？

服務人員服務態度是否友好、工作盡職盡責？

您對我公司提供的售后服務總體感覺如何？

。。。

我要實現的功能是出一個報表，在同一個頁面顯示對于每個問題，每個答案的總共出現次數。

我實現了一個簡單的效果，如下圖所示：

當然六個圖標用的都是一模一樣的測試數據，主要解決了多個圖表出現在同一個頁面里的布局問題。

大家用下面這個鏈接測試下效果。用Chrome開發者工具即可查看093_chart.html的實現。

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

手機上打開的效果。

簡單過一下代碼：

兩個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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

云服務器 GPU云服務器 js的值顯示在頁面上多個域名同一網站多個域名同一網站備案多個圖表

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98729.html

分享一個開源的JavaScript統計圖表庫，40行代碼實現專業統計圖表

摘要：柱狀圖，餅狀圖，點狀圖等等您能想到的類型全部支持。這個開源庫的官網直接看如何只用行代碼就實現專業的統計圖表。第八行聲明要顯示的統計圖的類型。如果是線狀圖，柱狀圖這些類型，則定義的維度作為統計圖的縱坐標也就是坐標。提升程序員工作效率的工具/技巧推薦系列推薦一個功能強大的文件搜索工具SearchMyFiles 介紹一個好用的免費流程圖和UML繪制軟件-Diagram Designer...

Magicer 2019-08-23 12:33 評論0 收藏0
常用的數據可視化工具

摘要：俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。是一個地圖庫，主要面向數據可視化用戶。俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 評論0 收藏0
New Relic性能監控（三）瀏覽器端監控

摘要：性能概覽下圖為一個監控的的性能概覽頁面該頁面主要包含下面幾個部分的內容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監控（三）瀏覽器端監控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經驗，鑒于國內較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...

Codeing_ls 2019-08-26 11:53 評論0 收藏0
New Relic性能監控（三）瀏覽器端監控

摘要：性能概覽下圖為一個監控的的性能概覽頁面該頁面主要包含下面幾個部分的內容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監控（三）瀏覽器端監控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經驗，鑒于國內較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...

banana_pi 2019-08-15 15:48 評論0 收藏0
New Relic性能監控（三）瀏覽器端監控

摘要：性能概覽下圖為一個監控的的性能概覽頁面該頁面主要包含下面幾個部分的內容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監控（三）瀏覽器端監控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經驗，鑒于國內較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...

yanest 2019-08-02 10:21 評論0 收藏0