成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

分享一個開源的JavaScript統(tǒng)計(jì)圖表庫，40行代碼實(shí)現(xiàn)專業(yè)統(tǒng)計(jì)圖表

Magicer / 638人閱讀

摘要：柱狀圖，餅狀圖，點(diǎn)狀圖等等您能想到的類型全部支持。這個開源庫的官網(wǎng)直接看如何只用行代碼就實(shí)現(xiàn)專業(yè)的統(tǒng)計(jì)圖表。第八行聲明要顯示的統(tǒng)計(jì)圖的類型。如果是線狀圖，柱狀圖這些類型，則定義的維度作為統(tǒng)計(jì)圖的縱坐標(biāo)也就是坐標(biāo)。

提升程序員工作效率的工具/技巧推薦系列

推薦一個功能強(qiáng)大的文件搜索工具SearchMyFiles

介紹一個好用的免費(fèi)流程圖和UML繪制軟件-Diagram Designer

介紹Windows任務(wù)管理器的替代者-Process Explorer

介紹一個強(qiáng)大的磁盤空間檢測工具Space Sniffer

如何在電腦上比較兩個相似文件的差異

程序員工作效率提升系列-推薦一個JSON文件查看和修改的小工具

將Chrome調(diào)試器里的JavaScript變量保存成本地JSON文件

這可能是史上最簡單易用的開源統(tǒng)計(jì)圖表繪制庫了。柱狀圖，餅狀圖，點(diǎn)狀圖等等您能想到的類型全部支持。

這個開源庫的官網(wǎng)：http://www.chartjs.org/

直接看如何只用40行代碼就實(shí)現(xiàn)專業(yè)的統(tǒng)計(jì)圖表。代碼如下：

效果如下：

簡單解釋下代碼。

第二行： 這個canvas結(jié)點(diǎn)作為最后繪制出的圖表顯示的一個容器，也就是說，最后畫出來的統(tǒng)計(jì)圖表就顯示在這個canvas結(jié)點(diǎn)里。大家可以根據(jù)需要定義圖標(biāo)的寬（width）和高（height）。

第三行：聲明了這個開源庫的CDN地址。

第八行：聲明要顯示的統(tǒng)計(jì)圖的類型。同一套數(shù)據(jù)是可以用不同的統(tǒng)計(jì)圖類型顯示出來的，可選的有bar, bubble, doughnut, horizontalBar, line, pie, polarArea, radar, scatter這幾種。本文后半部分提供了每一種圖的效果。

第十行：labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]。定義了統(tǒng)計(jì)圖表的一個維度。如果是線狀圖，柱狀圖這些類型，則labels定義的維度作為統(tǒng)計(jì)同的橫坐標(biāo)（也就是X坐標(biāo)）。

第十三行：data: [12, 14, 3, 5, 2, 3] 定義了統(tǒng)計(jì)圖表的另一個維度。如果是線狀圖，柱狀圖這些類型，則labels定義的維度作為統(tǒng)計(jì)圖的縱坐標(biāo)（也就是Y坐標(biāo)）。如果是餅狀圖，data定義的這些值是描述每個維度占整個餅（一個完整圓）的百分比。

第二十六行：responsive: false，意思是使用第二行canvas指定的寬和高來繪制統(tǒng)計(jì)圖表。如果response置為true，意思是響應(yīng)式布局，會以全屏的方式顯示圖表。

這40行代碼就講解完了，對于應(yīng)用程序開發(fā)人員來說，無需去研究里面的繪圖細(xì)節(jié)，甚至連用戶把鼠標(biāo)放到圖標(biāo)上自動彈出tooltip這些細(xì)節(jié)都自動由這個庫實(shí)現(xiàn)了，使用起來非常方便。

下面是把第八行代碼圖標(biāo)的類型屬性type傳入各種支持的類型后的渲染結(jié)果，方便大家查閱：

type: line - 線狀圖

doughnut - 圈圖

horizontalBar - 水平柱圖

pie - 餅狀圖

radar - 雷達(dá)圖

polarArea

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98730.html

相關(guān)文章

  • 常用的數(shù)據(jù)可視化工具

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

    philadelphia 評論0 收藏0

  • Eclipse被卡死了或者失去響應(yīng)了后分析根源的一個小技巧

    摘要：沒有經(jīng)驗(yàn)的朋友可能會用任務(wù)管理器強(qiáng)制結(jié)束進(jìn)程，抱著僥幸的心理一次又一次得重試，希望這個卡死或者失去響應(yīng)的問題可以不再出現(xiàn)，但往往事與愿違。本文介紹的這個通用辦法適用于一切不能正常工作時的故障排查和分析。 提升程序員工作效率的工具/技巧推薦系列 推薦一個功能強(qiáng)大的文件搜索工具SearchMyFiles 介紹一個好用的免費(fèi)流程圖和UML繪制軟件-Diagram Designer 介紹Win...

    王陸寬 評論0 收藏0

  • Eclipse被卡死了或者失去響應(yīng)了后分析根源的一個小技巧

    摘要：沒有經(jīng)驗(yàn)的朋友可能會用任務(wù)管理器強(qiáng)制結(jié)束進(jìn)程，抱著僥幸的心理一次又一次得重試，希望這個卡死或者失去響應(yīng)的問題可以不再出現(xiàn)，但往往事與愿違。本文介紹的這個通用辦法適用于一切不能正常工作時的故障排查和分析。 提升程序員工作效率的工具/技巧推薦系列 推薦一個功能強(qiáng)大的文件搜索工具SearchMyFiles 介紹一個好用的免費(fèi)流程圖和UML繪制軟件-Diagram Designer 介紹Win...

    liukai90 評論0 收藏0

  • 12個值得關(guān)注的頂級可視化JS庫 涉及圖表、動畫、時間處理，表格操作

    摘要：本文是譯文，原文是我在原文的基礎(chǔ)上加了百度的圖表庫，這個也是毫不遜色其他圖表庫的。更新記錄圖表類數(shù)據(jù)驅(qū)動文檔通常被稱為最強(qiáng)大的開源可視化庫。是迄今為止最好的圖表庫。在頂級功能支持，使任何元素可拖動，可旋轉(zhuǎn)或可滑動滾動和快速性能的能力。 本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎(chǔ)上加了百度的Echats圖表庫，這個也是毫不遜色其他圖表...

    JinB 評論0 收藏0

發(fā)表評論

0條評論

Magicer

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<