資訊專欄INFORMATION COLUMN
摘要：我要實現(xiàn)的功能是出一個報表，在同一個頁面顯示對于每個問題，每個答案的總共出現(xiàn)次數(shù)。第一個負責用個餅狀圖來顯示問題的結(jié)果，第二個里的個則顯示柱狀圖。之所以除以而不除以是為了給每一行的統(tǒng)計圖之間預(yù)留一些空隙。
最近我接到一個開發(fā)任務(wù)，要求就“售后服務(wù)客戶滿意度調(diào)查問卷表”里客戶填寫的反饋答案做一個統(tǒng)計。
問題的例子如下：
您最后一次是何時購買了我們的產(chǎn)品？
服務(wù)人員服務(wù)態(tài)度是否友好、工作盡職盡責？
您對我公司提供的售后服務(wù)總體感覺如何？
。。。
我要實現(xiàn)的功能是出一個報表，在同一個頁面顯示對于每個問題，每個答案的總共出現(xiàn)次數(shù)。
我實現(xiàn)了一個簡單的效果，如下圖所示：
當然六個圖標用的都是一模一樣的測試數(shù)據(jù)，主要解決了多個圖表出現(xiàn)在同一個頁面里的布局問題。
大家用下面這個鏈接測試下效果。用Chrome開發(fā)者工具即可查看093_chart.html的實現(xiàn)。
http://i042416.github.io/Fior...
手機上打開的效果。
簡單過一下代碼：
兩個div里各包含了6個canvas。第一個div負責用6個餅狀圖來顯示問題的結(jié)果，第二個div里的6個canvas則顯示柱狀圖。每個canvas我用了標注成!important的display:inline屬性，來強制讓這些位于canvas節(jié)點里的統(tǒng)計圖從左到右顯示，而不是默認的每顯示一個就換行。
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節(jié)點的clientWidth屬性來獲得，然后除以6.5，商即為每個統(tǒng)計圖的寬度。之所以除以6.5而不除以6是為了給每一行的統(tǒng)計圖之間預(yù)留一些空隙。
統(tǒng)計圖的類型，X和Y坐標的數(shù)據(jù)和標簽通過option對象傳入到函數(shù)createChartOnCanvas中。
要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/98729.html
摘要：柱狀圖，餅狀圖，點狀圖等等您能想到的類型全部支持。這個開源庫的官網(wǎng)直接看如何只用行代碼就實現(xiàn)專業(yè)的統(tǒng)計圖表。第八行聲明要顯示的統(tǒng)計圖的類型。如果是線狀圖，柱狀圖這些類型，則定義的維度作為統(tǒng)計圖的縱坐標也就是坐標。 提升程序員工作效率的工具/技巧推薦系列 推薦一個功能強大的文件搜索工具SearchMyFiles 介紹一個好用的免費流程圖和UML繪制軟件-Diagram Designer...
摘要：俗話說，不會使用工具來完成任務(wù)的都是進化不完全的表現(xiàn)，大數(shù)據(jù)時代，可視化已經(jīng)深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結(jié)下當下可視化工具都有哪些。是一個地圖庫，主要面向數(shù)據(jù)可視化用戶。 俗話說，不會使用工具來完成任務(wù)的都是進化不完全的表現(xiàn)，大數(shù)據(jù)時代，可視化已經(jīng)深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結(jié)下當下可視化工具都有哪些。 showImg...
摘要：性能概覽下圖為一個監(jiān)控的的性能概覽頁面該頁面主要包含下面幾個部分的內(nèi)容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應(yīng)時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...
摘要：性能概覽下圖為一個監(jiān)控的的性能概覽頁面該頁面主要包含下面幾個部分的內(nèi)容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應(yīng)時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...
摘要：性能概覽下圖為一個監(jiān)控的的性能概覽頁面該頁面主要包含下面幾個部分的內(nèi)容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應(yīng)時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...
閱讀 3503·2021-11-19 09:40
閱讀 1443·2021-10-11 11:07
閱讀 4958·2021-09-22 15:07
閱讀 2963·2021-09-02 15:15
閱讀 2017·2019-08-30 15:55
閱讀 588·2019-08-30 15:43
閱讀 935·2019-08-30 11:13
閱讀 1537·2019-08-29 15:36
