記錄Raphael的一點點事

raphael－乙個很是陌生的東東，之前也沒見過。在專案中突然遇到這樣，感覺有點無從下手，找了一些資料，感覺得到的太小，國內現在這方面的資料太少，也就看到過乙個把官方文件翻譯過來的**，用處也不大。

raphaël是跨瀏覽器的js向量圖形庫，目前支援的瀏覽器包括： firefox 3.0+，safari 3.0+，chrome 5.0+，opera 9.5+ 以及 internet explorer 6.0+，相容性非常好，而且也十分漂亮，強大到可以繪製各種圖表，字母，動畫，甚至影象(官網上就有乙個繪製虎頭的demo)。

現在就記錄點使用中遇到的問題，也簡單說說使用方法：

然後：引入一些需要用到的js.比如raphael.js/g.raphael.js/g.raphael-min.js這樣的。根據想畫的報表來確定

再然後就可以開始各種使用了。

//在10, 50的地方， 建立320 × 200的畫布

var ***** = raphael(10, 50, 320, 200);
// 在x = 50, y = 40,的地方畫半徑為10的圓
var circle = *****.circle(50, 40, 10);
//給繪製的圓圈填充紅色 red (#f00)
circle.attr("fill", "#f00");
// 設定畫筆（stroke）的顏色為白色
circle.attr("stroke", "#fff");

當然這只是官方給的基本用法，在專案中使用的肯定不止這些了，先給出乙個效果圖

/*以上全是一些資料，大概就是如果沒有百分比就賦值為0,否則擷取其中子串再轉化為數字*/

var data = [percent6,percent5,percent1,percent2,percent3,percent101,percent4,percent102];//設定要用的資料

var flag = true;

var legend = new array("%%.%% - "+$.i18n.prop('transaction.type.6'), "%%.%% - "+$.i18n.prop('transaction.type.5'),"%%.%% - "+$.i18n.prop('transaction.type.1'),"%%.%% - "+$.i18n.prop('transaction.type.2'),"%%.%% - "+$.i18n.prop('transaction.type.3'),"%%.%% - "+$.i18n.prop('transaction.type.101'),"%%.%% - "+$.i18n.prop('transaction.type.4'),"%%.%% - "+$.i18n.prop('transaction.type.102'));

//利用jquery做的國際化，實際就是百分比的文字說明，一定要和data一一對應，否則出錯

var r = raphael("holder");//例項化，在id="holder"的div上渲染圖表

//320：左邊距離，越大越靠右

//120:上邊距，越大越靠下

//100:圖表縮放大小，值越大，圖表越大

//[55, 20, 13, 32, 5, 1, 2, 10]：是資料

var displaydata = new array();

var displaylegend = new array();

for(var i=0;i

其實用起來挺簡單的，三步就行了，一是例項化raphael，並指定渲染到哪；二是給一些資料顯示；三是加一些效果看起來更炫。

註解1：這個才是本文想記錄的重點，raphael資料的載入可能是比較死板，data,legend必須一一對應，否則會出錯，另乙個。比如現在顯示的是面百分比，所以必須加起來是100%，否則不會顯示。在使用過程中有乙個之前一直找不到原因的地方，現在我設定的是乙個８個元素的陣列，但，這８個元素不一定全有直，按之前的想法是，如果有哪個元素為空(處理後為0),應該會把這個去掉。只要保證其他的相加是100%就行了，但實際不是這樣的。

現在出現的問題是，如果只有乙個資料是100%，其他的為0，但顯示出來的效果總不是完整的乙個圖，ie下會出現一條線，但又不點資料，百分比的文字顯示為 -others。

找了很久才發現問題一，也就是現在的註解1上的**，因為raphael只會處理data裡面的資料，不管有沒有值，都會顯示，如果為０則顯示others.所以，必須去掉所有為0的值，重新給data賦值。

記錄Raphael的一點點事

每天記錄一點點

深度學習的一點點一點點知識

一點點感想

記錄Raphael的一點點事

每天記錄一點點

深度學習的一點點一點點知識

一點點感想

相關推薦