javascript實現(xiàn)的柱狀統(tǒng)計圖表
更新時間：2010年07月29日 13:17:25 作者：
下面是完成后的預(yù)覽圖，可以看到，繪制一個表格，耗時0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！
工作需要，用javascript做一個統(tǒng)計圖表：
完成后，做個筆記，大家分享一下，互相學(xué)習(xí)。其中還有點問題，還不是很完善。
其中參考了百度空間，中管理中心，訪問統(tǒng)計，的js統(tǒng)計圖表。但是應(yīng)用上還是有差別，因為我做的這個項目中，需要時實的繪制新的統(tǒng)計表格，當(dāng)有數(shù)據(jù)變化的時候，就會調(diào)用繪制表格的方法。所以要考慮頁面性能的問題。
下面是完成后的預(yù)覽圖，可以看到，繪制一個表格，耗時0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！
目前在firefox，chrome，IE8，正常沒問題，IE6下有問題，我現(xiàn)在已經(jīng)不管IE6了，做前端的兄弟們要盡量引導(dǎo)用戶放棄IE6啦。
全部代碼如下：可復(fù)制直接運行。
現(xiàn)在有一個問題，求解，就是在firebug調(diào)試狀態(tài)下，鼠標(biāo)一旦移動到水平標(biāo)尺線上，則報錯！
哪位知道如何解決這個問題，請不吝賜教！謝謝！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個圖表做完了，還有點小小的遺憾，就是那個困擾我的，firebug調(diào)試狀態(tài)，鼠標(biāo)移動到水平標(biāo)尺線上，報錯?。?
總結(jié)一下：javascript操作dom元素的基本功。繪制圖表之前要有一個草稿，對于復(fù)雜的圖表，必須在紙上畫出來，才能有一個清晰的思維，開始進行編碼。
代碼打包下載
完成后，做個筆記，大家分享一下，互相學(xué)習(xí)。其中還有點問題，還不是很完善。
其中參考了百度空間，中管理中心，訪問統(tǒng)計，的js統(tǒng)計圖表。但是應(yīng)用上還是有差別，因為我做的這個項目中，需要時實的繪制新的統(tǒng)計表格，當(dāng)有數(shù)據(jù)變化的時候，就會調(diào)用繪制表格的方法。所以要考慮頁面性能的問題。
下面是完成后的預(yù)覽圖，可以看到，繪制一個表格，耗時0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！
目前在firefox，chrome，IE8，正常沒問題，IE6下有問題，我現(xiàn)在已經(jīng)不管IE6了，做前端的兄弟們要盡量引導(dǎo)用戶放棄IE6啦。
全部代碼如下：可復(fù)制直接運行。
現(xiàn)在有一個問題，求解，就是在firebug調(diào)試狀態(tài)下，鼠標(biāo)一旦移動到水平標(biāo)尺線上，則報錯！
哪位知道如何解決這個問題，請不吝賜教！謝謝！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個圖表做完了，還有點小小的遺憾，就是那個困擾我的，firebug調(diào)試狀態(tài)，鼠標(biāo)移動到水平標(biāo)尺線上，報錯?。?
總結(jié)一下：javascript操作dom元素的基本功。繪制圖表之前要有一個草稿，對于復(fù)雜的圖表，必須在紙上畫出來，才能有一個清晰的思維，開始進行編碼。
代碼打包下載
您可能感興趣的文章:
- D3.js(v3)+react 實現(xiàn)帶坐標(biāo)與比例尺的柱形圖 (V3版本)
- 使用D3.js+Vue實現(xiàn)一個簡單的柱形圖
- JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實例代碼
- Javascript實時柱狀圖實現(xiàn)代碼
- d3.js實現(xiàn)立體柱圖的方法詳解
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- JavaScript實現(xiàn)的DOM繪制柱狀圖效果示例
- JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果示例
- Chart.js 輕量級HTML5圖表繪制工具庫（知識整理）
- js HTML5 canvas繪制圖片的方法
- JS插件amCharts實現(xiàn)繪制柱形圖默認顯示數(shù)值功能示例
相關(guān)文章
本文通過js和cas代碼分別給大家介紹了移動端判斷手機橫豎屏狀態(tài)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了Javascript類型判斷相關(guān)例題及解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
javascript下漢字和Unicode編碼互轉(zhuǎn)代碼
這個是就是把漢字和Unicode編碼互轉(zhuǎn)的javascript代碼，也是從網(wǎng)上找到了，也許有人用得著??！2010-10-10
本文分享了js倒計時顯示的實例，需要的朋友可以參考借鑒，下面就跟小編一起來看看吧2016-12-12
js實現(xiàn)控制textarea輸入字符串的個數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)
下面小編就為大家?guī)硪黄猨s實現(xiàn)控制textarea輸入字符串的個數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
基于JavaScript實現(xiàn)除夕煙花秀與隨機祝福語
新年即將來臨，本文將為大家介紹一個基于JavaScript實現(xiàn)的頁面特效：煙花秀+春節(jié)隨機祝福語。文中的示例代碼講解詳細，感興趣的可以了解一下2022-01-01
這篇文章主要介紹了Flutter實現(xiàn)仿微信底部菜單欄,需要的朋友可以參考下2019-09-09
本篇文章主要介紹了用ES6寫全屏滾動插件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
textbox或textarea的輸入字符限制有很多方法，在本將為大家詳細介紹下js中時如何實現(xiàn)的，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了jquery動態(tài)添加刪除(tr/td)的方法,需要的朋友可以參考下2015-02-02