Raphael實現數據可視化優缺點打賞

說起Raphael,可是老早就聽說了,不過前些年和EXTJS合并后好像不怎么更新了,好在組件沒什么bug,更新或不更新都阻攔不了我們兼容IE9以下瀏覽器的腳步。廢話完畢,下面先簡單介紹下我們的主角——Raphael

Raphael 是一個用于在網頁中繪制矢量圖形的 Javascript 庫。它使用 SVG W3C 推薦標準和 VML 作為創建圖形的基礎,你可以通過 JavaScript 操作 DOM 來輕松創建出各種復雜的柱狀圖、餅圖、曲線圖等各種圖表,還可以繪制任意形狀的圖形,可以進行圖表或圖像的裁剪和旋轉等復雜操作。正因Raphael對VML的強力支持,使得在IE9以下版本,目前支持的瀏覽器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+,實際測試中,甚至IE5都能夠實現我們想要的圖形、動畫效果。

下面展示下Raphael的簡介操作,假設頁面有一div容器,id為chart,我們可以這樣寫:

var paper=new Raphael(document.getElementById("chart"),1000,500);

這樣就創建了畫布;

var rect=paper.rect(150,150,150,150);

可以這樣創建矩形;

var circle=paper.circle(150,150,150);

可以這樣創建圓;

var path=paper.path("M0,0L150,150L300,300Z");

也可以這樣繪制任意圖形,每一次創建圖形后,就會自動插入到頁面內部。上面簡單列Raphael還有很多特性,如Set、Animation等,這里不再一一介紹,有興趣的童鞋可以自己去官網看下,雖然文檔不是很全,但對于專業的你,應該已經足夠了。

官網地址是:http://raphaeljs.com/

大概講了下Raphael的方便,不免再啰嗦下其不爽之處,最近又遇奇葩需求,鑒于多年經驗沒見過類似圖表,無奈之下,自己拿Raphael繪制,兼容性良好,一切基本元素就緒,可當我想加動畫效果時發現,我所繪制的多個元件組成的圖,不能很好的實現動畫效果,主要是因為Raphael不支持Group元素(g標簽),這使得我不得不想辦法大規模的改動組件,盡量將小元件繪制到一個path中,以此來保證動畫的流程度。另外一點就是,在使用text標簽時發現,Raphael在每個創建好的text標簽下面加一tspan來控制文本,如果使用\n,Raphael則會計算好高度,默認在text內部增加多個tspan,但這對于我們奇葩需求又不好用了,我想保證我文本元件在一起的同時,還想控制內部多個tspan樣式差異,比如三個tspan字體大小、顏色不同,這點Raphael沒有很好的API控制。對于沒有group的問題,不知道其原因,期間也在網上找過增加group的插件,因為要兼容ie8,效果都不理想,最終放棄,對于text樣式的控制,只好插入頁面后人為通過js操作其屬性來達到要求了。

就簡單介紹到這了,小小透露下,目前小子正在著手實現Raphael的分組功能,因為Raphael擴展接口的方式支持有限,目前思路是修改Raphael源代碼增加特殊Element,以實現group效果,目前測試svg下良好,可以使用所有Element屬性,包括animate,但是IE8下使用VML的情況,暫未測試完畢,大家可以期待哦,如果完成,后續會放出修改后的代碼給大家使用哦。

Raphael實現數據可視化優缺點
文章《Raphael實現數據可視化優缺點》二維碼
  • 微信打賞
  • 支付寶打賞

已有5條評論

  1. COD試劑

    相當一個組件

    2015-07-08 17:29 回復
  2. 何捷浪

    不錯~~好~萌菌網www.moejun.tv/

    2015-04-27 09:52 回復
  3. 魚廣告聯盟

    博主文章寫得不錯 贊一個

    2015-04-15 13:43 回復
  4. 開心之花

    支持一下www.02942.cn

    2015-01-25 15:14 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖