開源、免費功能全面的Chart圖


簡介:

每個前端都有一個Chart夢,至於真正去做的寥寥無幾,無怪乎幾個原因:

  1. 瀏覽器兼容問題
  2. 數據處理的一些算法,如自動計算坐標軸、自動排列文本等
  3. 流暢的動畫
  4. 豐富的交互功能

去年一年的時間里,我一直在維護和豐富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

其他的就不貼了,希望能給大家帶來方便


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM