国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

Magicer / 636人閱讀

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

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

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

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

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

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

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

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

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

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

這個(gè)開(kāi)源庫(kù)的官網(wǎng)：http://www.chartjs.org/

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

效果如下：

簡(jiǎn)單解釋下代碼。

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

第三行：聲明了這個(gè)開(kāi)源庫(kù)的CDN地址。

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

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

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

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

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

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

type: line - 線(xiàn)狀圖

doughnut - 圈圖

horizontalBar - 水平柱圖

pie - 餅狀圖

radar - 雷達(dá)圖

polarArea

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98730.html

相關(guān)文章

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

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

    philadelphia 評(píng)論0 收藏0

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

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

    王陸寬 評(píng)論0 收藏0

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

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

    liukai90 評(píng)論0 收藏0

  • 12個(gè)值得關(guān)注的頂級(jí)可視化JS庫(kù) 涉及圖表、動(dòng)畫(huà)、時(shí)間處理，表格操作

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

    JinB 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Magicer

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<