javascript實(shí)現(xiàn)的柱狀統(tǒng)計(jì)圖表
更新時(shí)間：2010年07月29日 13:17:25 作者：
下面是完成后的預(yù)覽圖，可以看到，繪制一個(gè)表格，耗時(shí)0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！
工作需要，用javascript做一個(gè)統(tǒng)計(jì)圖表：
完成后，做個(gè)筆記，大家分享一下，互相學(xué)習(xí)。其中還有點(diǎn)問(wèn)題，還不是很完善。
其中參考了百度空間，中管理中心，訪問(wèn)統(tǒng)計(jì)，的js統(tǒng)計(jì)圖表。但是應(yīng)用上還是有差別，因?yàn)槲易龅倪@個(gè)項(xiàng)目中，需要時(shí)實(shí)的繪制新的統(tǒng)計(jì)表格，當(dāng)有數(shù)據(jù)變化的時(shí)候，就會(huì)調(diào)用繪制表格的方法。所以要考慮頁(yè)面性能的問(wèn)題。
下面是完成后的預(yù)覽圖，可以看到，繪制一個(gè)表格，耗時(shí)0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！
目前在firefox，chrome，IE8，正常沒(méi)問(wèn)題，IE6下有問(wèn)題，我現(xiàn)在已經(jīng)不管IE6了，做前端的兄弟們要盡量引導(dǎo)用戶放棄IE6啦。
全部代碼如下：可復(fù)制直接運(yùn)行。
現(xiàn)在有一個(gè)問(wèn)題，求解，就是在firebug調(diào)試狀態(tài)下，鼠標(biāo)一旦移動(dòng)到水平標(biāo)尺線上，則報(bào)錯(cuò)！
哪位知道如何解決這個(gè)問(wèn)題，請(qǐng)不吝賜教！謝謝！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這個(gè)圖表做完了，還有點(diǎn)小小的遺憾，就是那個(gè)困擾我的，firebug調(diào)試狀態(tài)，鼠標(biāo)移動(dòng)到水平標(biāo)尺線上，報(bào)錯(cuò)??！
總結(jié)一下：javascript操作dom元素的基本功。繪制圖表之前要有一個(gè)草稿，對(duì)于復(fù)雜的圖表，必須在紙上畫出來(lái)，才能有一個(gè)清晰的思維，開(kāi)始進(jìn)行編碼。
代碼打包下載
完成后，做個(gè)筆記，大家分享一下，互相學(xué)習(xí)。其中還有點(diǎn)問(wèn)題，還不是很完善。
其中參考了百度空間，中管理中心，訪問(wèn)統(tǒng)計(jì)，的js統(tǒng)計(jì)圖表。但是應(yīng)用上還是有差別，因?yàn)槲易龅倪@個(gè)項(xiàng)目中，需要時(shí)實(shí)的繪制新的統(tǒng)計(jì)表格，當(dāng)有數(shù)據(jù)變化的時(shí)候，就會(huì)調(diào)用繪制表格的方法。所以要考慮頁(yè)面性能的問(wèn)題。
下面是完成后的預(yù)覽圖，可以看到，繪制一個(gè)表格，耗時(shí)0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！
目前在firefox，chrome，IE8，正常沒(méi)問(wèn)題，IE6下有問(wèn)題，我現(xiàn)在已經(jīng)不管IE6了，做前端的兄弟們要盡量引導(dǎo)用戶放棄IE6啦。
全部代碼如下：可復(fù)制直接運(yùn)行。
現(xiàn)在有一個(gè)問(wèn)題，求解，就是在firebug調(diào)試狀態(tài)下，鼠標(biāo)一旦移動(dòng)到水平標(biāo)尺線上，則報(bào)錯(cuò)！
哪位知道如何解決這個(gè)問(wèn)題，請(qǐng)不吝賜教！謝謝！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這個(gè)圖表做完了，還有點(diǎn)小小的遺憾，就是那個(gè)困擾我的，firebug調(diào)試狀態(tài)，鼠標(biāo)移動(dòng)到水平標(biāo)尺線上，報(bào)錯(cuò)??！
總結(jié)一下：javascript操作dom元素的基本功。繪制圖表之前要有一個(gè)草稿，對(duì)于復(fù)雜的圖表，必須在紙上畫出來(lái)，才能有一個(gè)清晰的思維，開(kāi)始進(jìn)行編碼。
代碼打包下載
您可能感興趣的文章:
- D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖 (V3版本)
- 使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖
- JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實(shí)例代碼
- Javascript實(shí)時(shí)柱狀圖實(shí)現(xiàn)代碼
- d3.js實(shí)現(xiàn)立體柱圖的方法詳解
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果示例
- JS+html5 canvas實(shí)現(xiàn)的簡(jiǎn)單繪制折線圖效果示例
- Chart.js 輕量級(jí)HTML5圖表繪制工具庫(kù)（知識(shí)整理）
- js HTML5 canvas繪制圖片的方法
- JS插件amCharts實(shí)現(xiàn)繪制柱形圖默認(rèn)顯示數(shù)值功能示例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
在平時(shí)工作開(kāi)發(fā)中，大部分開(kāi)發(fā)人員都花費(fèi)大量的時(shí)間在維護(hù)其他人員的代碼。很難從頭開(kāi)始開(kāi)發(fā)新代碼，很多情況下都是以他人成果為基礎(chǔ)的，或者新增修改需求，自己寫的代碼也會(huì)被其他開(kāi)發(fā)人員調(diào)用，所以寫好一份高質(zhì)量可維護(hù)的代碼就顯得十分重要。2021-05-05
這篇文章主要介紹了js 閉包,結(jié)合實(shí)例形式深入分析了JS閉包的概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板代碼
最近做了一個(gè)前端項(xiàng)目，其中有需求：通過(guò)button直接把input或者textarea里的值復(fù)制到粘貼板里。下面小編給大家分享JavaScript實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板代碼，需要的朋友參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了canvas繪制刮刮卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
本篇文章主要是對(duì)判斷js腳本加載完成的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
小程序websocket心跳庫(kù)(websocket-heartbeat-miniprogram)
這篇文章主要介紹了小程序websocket心跳庫(kù)(websocket-heartbeat-miniprogram)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
由于在JS中，所有的函數(shù)都是對(duì)象，所以使用函數(shù)指針十分簡(jiǎn)單，也是這些東西使JS函數(shù)有趣且強(qiáng)大，這里特分享一下2018-07-07
很多前端只會(huì)謝謝頁(yè)面,一讓他們接觸js,就非常害怕,下面這篇文章主要給大家介紹了關(guān)于JS技巧之一行賦值語(yǔ)句能玩出多少花樣的相關(guān)資料,需要的朋友可以參考下2022-10-10
javascript前端和后臺(tái)進(jìn)行數(shù)據(jù)交互方法示例
這篇文章主要介紹了javascript前端和后臺(tái)進(jìn)行數(shù)據(jù)交互方法示例，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08