簡介:
每個前端都有一個Chart夢,至於真正去做的寥寥無幾,無怪乎幾個原因:
- 瀏覽器兼容問題
- 數據處理的一些算法,如自動計算坐標軸、自動排列文本等
- 流暢的動畫
- 豐富的交互功能
去年一年的時間里,我一直在維護和豐富BUI控件庫,由於缺少Chart,一直感覺不踏實,項目過程中由於Highchart收費,只能使用raphael做些臨時的圖表,復用性很差,最終頭腦一沖動就基於Raphael模仿Highchart把整個Chart圖表寫了一遍,經過了2個多月的煎熬,終於能提供給大家使用,無論是否使用,歡迎來捧個場。
圖形分類
實現了以下圖表:
- 折線圖
- 曲線圖
- 區域圖、區域層疊圖、百分比區域層疊圖
- 柱狀圖、柱狀層疊圖、百分比柱狀層疊圖
- 餅圖、半餅圖、環形圖、嵌套環形圖
- 散列圖、氣泡圖
- 雷達圖中支持折線圖、區域圖和柱狀圖
思路:
- 接口方面跟highchart基本保持一致,實現Highchart 80%的功能
- 加強Chart跟現有控件的可交互性,例如:表格跟雷達圖、柱狀圖的交互
- 提供更加方便的使用方式,數據的傳遞,改變,坐標軸的自動生成更加智能
示例:
圖形首頁:
折線圖:http://builive.com/chart/line.php#line/base.php
區域圖:http://builive.com/chart/area.php#area/base.php
柱狀圖:http://builive.com/chart/column.php#column/base.php
其他的就不貼了,希望能給大家帶來方便