快捷導(dǎo)航

javascript實(shí)現(xiàn)的柱狀統(tǒng)計(jì)圖表

更新時(shí)間：2010年07月29日 13:17:25 作者：

下面是完成后的預(yù)覽圖，可以看到，繪制一個(gè)表格，耗時(shí)0.005毫秒，也就是200分之一秒。效率我還是比較滿(mǎn)意的！

工作需要，用javascript做一個(gè)統(tǒng)計(jì)圖表：
完成后，做個(gè)筆記，大家分享一下，互相學(xué)習(xí)。其中還有點(diǎn)問(wèn)題，還不是很完善。
其中參考了百度空間，中管理中心，訪(fǎng)問(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分之一秒。效率我還是比較滿(mǎn)意的！
目前在firefox，chrome，IE8，正常沒(méi)問(wèn)題，IE6下有問(wèn)題，我現(xiàn)在已經(jīng)不管IE6了，做前端的兄弟們要盡量引導(dǎo)用戶(hù)放棄IE6啦。

全部代碼如下：可復(fù)制直接運(yùn)行。
現(xiàn)在有一個(gè)問(wèn)題，求解，就是在firebug調(diào)試狀態(tài)下，鼠標(biāo)一旦移動(dòng)到水平標(biāo)尺線(xiàn)上，則報(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)尺線(xiàn)上，報(bào)錯(cuò)??！

總結(jié)一下：javascript操作dom元素的基本功。繪制圖表之前要有一個(gè)草稿，對(duì)于復(fù)雜的圖表，必須在紙上畫(huà)出來(lái)，才能有一個(gè)清晰的思維，開(kāi)始進(jìn)行編碼。

代碼打包下載

您可能感興趣的文章:

相關(guān)文章

使用JS判斷移動(dòng)端手機(jī)橫豎屏狀態(tài)
本文通過(guò)js和cas代碼分別給大家介紹了移動(dòng)端判斷手機(jī)橫豎屏狀態(tài)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
Javascript類(lèi)型判斷相關(guān)例題及解析
這篇文章主要介紹了Javascript類(lèi)型判斷相關(guān)例題及解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
javascript下漢字和Unicode編碼互轉(zhuǎn)代碼
這個(gè)是就是把漢字和Unicode編碼互轉(zhuǎn)的javascript代碼，也是從網(wǎng)上找到了，也許有人用得著?。?/div> 2010-10-10
js倒計(jì)時(shí)顯示實(shí)例
本文分享了js倒計(jì)時(shí)顯示的實(shí)例，需要的朋友可以參考借鑒，下面就跟小編一起來(lái)看看吧
2016-12-12
js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
基于JavaScript實(shí)現(xiàn)除夕煙花秀與隨機(jī)祝福語(yǔ)
新年即將來(lái)臨，本文將為大家介紹一個(gè)基于JavaScript實(shí)現(xiàn)的頁(yè)面特效：煙花秀+春節(jié)隨機(jī)祝福語(yǔ)。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-01-01
Flutter實(shí)現(xiàn)仿微信底部菜單欄功能
這篇文章主要介紹了Flutter實(shí)現(xiàn)仿微信底部菜單欄,需要的朋友可以參考下
2019-09-09
用ES6寫(xiě)全屏滾動(dòng)插件的示例代碼
本篇文章主要介紹了用ES6寫(xiě)全屏滾動(dòng)插件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
限制textbox或textarea輸入字符長(zhǎng)度的JS代碼
textbox或textarea的輸入字符限制有很多方法，在本將為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
jquery動(dòng)態(tài)添加刪除(tr/td)
這篇文章主要介紹了jquery動(dòng)態(tài)添加刪除(tr/td)的方法,需要的朋友可以參考下
2015-02-02