用g.raphael.js高速繪製餅圖、柱狀圖、點狀圖、折線圖（下）
首先，這裡有個g.raphael.js的範例文章，可以直接看，我就不轉載了：
好了，接下來我們來試試建立柱狀圖：
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="g.raphael-min.js"></script>
<script type="text/javascript" src="g.bar-min.js"></script>
首先匯入我們上一篇裡面講到的幾個js，記得要按照上面從上到下的順序匯入，因為g.raphael是基於raphael的，只有raphael.js先載入完畢之後，它才能夠順利正常載入，同理，g.bar、g.pie、g.dot、g.line這四個則是基於g.raphael的，它們必須在graphael載入完畢之後才可以正常載入。
接著我們需要在html裡面隨便插入一個帶有id的div。
<body>
<div id="x"></div>
</body>
然後就可以來寫script了。
繪製之後的樣子：<html> <head> <title>範例</title> </head> <body> <div id="x"></div> </body> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript" src="g.raphael-min.js"></script> <script type="text/javascript" src="g.bar-min.js"></script> <script type="text/javascript"> var paper = Raphael("x",650,400); paper.barchart(0,0,200,300,[30,20,10],{type:"round"}); </script> </html>
接下來簡單講解一下柱狀圖，
var paper = Raphael("x",650,400);下面的bar.chart的引數如下:
Paper.barchart(x,y,width,height,values,opts);
x、y就不用說了，圖的起點左上角座標，width和height也不用說了，寬度和高度，values說一下，是陣列，而且必須是數值組成的陣列，不可以使用字串之類的非數值，不然會報錯，上面我隨便寫的是30、20和10三個值，使用者可以隨便寫。最有看頭的是最後面花括號裡的一些option。這個是對圖的一些屬性擴充套件。
對於柱狀圖，有以下屬性：
type，必須用字串，比如我上面的”round“，畫出來就是圓角的柱狀圖。預設是square，還有sharp、soft
gutter，預設”20%“，表示各個條圖之間的間距。該值放大之後，條形圖也會相應縮小。
vgutter，表示縱向間距，但對於柱狀圖來說沒什麼用。（如果用到了官網介紹的橫向柱狀圖，那麼該值當然就是有用的。）
colors，這個很重要，也用陣列，決定每一個柱狀圖的顏色。如：colors:["red","green","blue"],
stackedtostretch，真或假，官方說可以在圖上顯示字型，但實測無效。。。汗。。
好了，柱狀圖就介紹到這裡，接下來介紹的是一個叫做Paper.blob的屬性，其實就是在你的圖上面加一個註釋。
比如：
paper.blob(50, 50, "$9.99", 60);
第一和第二個引數是x和y，就不解釋了。第三個帶引號的引數是你的註釋內容。最後一個是旋轉角，用文字不方便說明，我用兩張圖來給大家看一下就明白了：
接下來是點狀圖，這個用的並不多：
先看看例子：
var paper = Raphael("x",650,500);
paper.dotchart(0, 0, 620, 500, [76, 70, 67, 71, 69], [2, 1, 2, 3, 4], [100, 120, 140, 160, 500], {max: 20, axisylabels: ['Mexico', 'Argentina', 'Cuba', 'Canada', 'United States of America'], heat: true, axis: '0 0 1 1'})
前四個引數和柱狀圖一樣，就不說了。第五和第六個引數表示數值的xy值的大小。後面是size，表示圓圈的大小，該值與屬性裡面的max成對應的關係。什麼意思呢？這個要從max值說起，首先max值是指原的直徑，預設是100，在這裡改成了10，單位是毫米。在上面的圓圈中，我們設定的大小是[100, 120, 140, 160, 500]，那麼最大的500就會變成10的尺寸，其餘的根據其與500的比例進行相應的縮小（如圖）。
接下來我們來看看它的一些屬性，首先是max，這個已經講了。
然後是symbol，也就是每一個小圖形的形狀，作者說目前只有circle一個值，也就是圓圈。
接著是gutter，和上面的柱狀圖一樣，表示兩個symbol之間的間距。
然後是heat，這是個布林值，預設false，為真的情況下，圓圈越大，顏色越暖（紅到綠，如圖），如果為假則預設所有圓圈都是藍色。
opacity，不透明度，預設為1。使用這個屬性之後，越小的圓圈會越透明。
href，陣列，看名字就知道是配合點選事件進行跳轉用的連結。
axis，表示軸，我們例子中是”0,0,1,1“分別對應頂部軸、右邊軸、底部軸和左邊軸。0表示空，1表示渲染出該軸線。
axisxstep，step表示格子，假設我們設定axisxstep:3，那麼底部就只剩下三格，其餘的均被省略。該值可用於簡化x軸或y軸上面的錨點數量。如果一個軸上面有三個格子，那麼出去頭尾之後，中間有兩個錨點。該值對應頂部軸和底部軸。
axisystep，這個和上面的一樣，對應的是y軸，也就是左邊軸或右邊軸。
axisxlabels，陣列，在對應的錨點位置想要顯示什麼字串，一般來說是和上面的值axisxstep配合使用的。如果沒有限定axisxstep的話，那麼axisxlabels就會從頭開始替換掉對應的錨點上的字元內容，但後續的錨點字元依然是預設的數字。
axisylabels，陣列，和上面的類比就懂了。
axisxtype，有‘t’、‘,’、‘-’、‘+’、‘|’等值，作用不明……
axisytype，類比上面的那個，作用依然不明，貌似是在預設的值前面加個符號什麼的……總之是一個用不著的蛋疼屬性。
點狀圖的資料相對來說比較複雜，而且繪製速度相對較慢，不推薦使用。
接下來我們來看看Paper.drop。和上面的Paper.blob是大同小異的東西，只是形狀不一樣，就不用再重複介紹了。
var paper = Raphael("x",650,500);
paper.dotchart(0, 0, 620, 500, [76, 70, 67, 71, 69], [2, 1, 2, 3, 4], [100, 120, 140, 160, 500], {max: 20, axisylabels: ['Mexico', 'Argentina', 'Cuba', 'Canada', 'United States of America'], heat: false, axis: '1 0 1 1', axisxstep: 3,axisytype:'t'})
paper.drop(200, 250, "$9.99", 60);
接下來在看看Paper.flag和Paper.label，後者沒有angle引數，其他的都和上面的一樣。就不再贅述。下面給出圖片。
paper.drop(200, 250, "$9.99", 60);
paper.flag(250, 250, "$9.99", 60);
paper.label(300, 250, "$9.99");
接下來我們來看看折線圖。
var paper = Raphael("x",650,500);
paper.linechart(0, 0, 300, 200, [1,2,3,4,5], [[1,2,3,4,5], [1,3,9,16,25], [100,50,25,12,6]], {smooth: false, colors: ['red', 'blue', 'green'], symbol: 'circle'});
首先x、y、width、height引數就不用介紹了，接著valuesx和valuesy和上面的點狀圖是一樣的，不同的是多個折線圖一般情況下是共用一個valuesx的，這一點需要注意。
接下來我們來看看折線圖有哪些屬性：
gutter，和上面一樣，表示symbols之間的距離。
symbol，哎，作者沒給出什麼好的，只有circle圓圈和 ‘ ’，‘ ’表示什麼都木有。
width，就是symbol的大小，數值越大，symbols的圓圈的大小就越大，沒多大用。
colors，最重要的一個引數，不解釋了。
shade，布林值，預設false，設定為true的時候就會產生陰影，至於陰影到底是怎樣，直接來個圖好說明一些：
nostroke，stroke表示連線的意思，顧名思義，nostroke就是沒有連線。該值是布林值，預設情況下是false，如果改為true的話，那上面圓圈之間的連線就會消失。特別注意：在沒有連線的情況下，如果依然使用了陰影屬性，那麼陰影就不會有半透明的效果了，會變成和你設定的顏色一樣的顏色（那叫一個醜啊……）
dash，字串，官方說該值可以改變symbols之間的連線方式，預設continues也就是正常連線，可以改成dashed也就是條狀虛線，還有dotted也就是點狀虛線，但是親測無效，不知道是不是被作者給坑了啊……
smooth，柔和過渡，該值為布林值。如果為true的話，那麼兩點之間的連線就不是直線，而成了曲線。如果是false就是直線。
axis，這個是軸，上面已經講過了，就不用說了吧。
axisxstep和axisystep，上面都講過了，不說了。
接下來我們來看看餅圖了。
var r = Raphael(10, 50, 640, 480);
r.piechart(320, 240, 100, [55, 20,11],{init:true, stroke:"#fff",colors:["red","#654321","pink"],legend:["紅色","棕色","粉色"],lengendmark:"text"})
餅圖的四個引數，分別是cx，cy，r，values，values就不用說明了。cx和cy表示圓心的x座標和y座標，而r是半徑。
接下來看看相關的一些屬性：
minPercent，預設值為1，當你的某一片最小的內容小於該值時就會濃縮在一大片裡面，變成一個others。（直接看圖吧，我設定了minPercent:60）
maxSlices,表示你想要畫出的扇形片的最大數量，舉個例子，你有十個資料，但是你設定了maxSlices等於3，那麼只有最大的三個資料會被渲染成三片，其他的都被合成了一個大大的others，明白了吧？
stroke，表示所有扇形的邊框的顏色，記住是所有，而不是單獨的某一個。
strokewidth，扇形邊框線的寬度。
init，布林值，預設是false，如果設定為true的話就會開啟動畫效果，在載入餅圖時，會看到餅圖從半徑為零慢慢變大，直到增大至最大半徑。
colors，陣列，不解釋了。
href，跳轉連結的陣列，不解釋了。
legend，陣列，表示註釋文字，可以參考我上面的例子。
legendcolor，註釋文字的顏色，預設是黑色的。
legendothers，字串，當出現others時可以改成其他的文字，比如我們可以改成中文的"其他"。
legendmark，字串，修改註釋文字前面的小圖形的形狀，預設是圓形，而且也只有圓形。。。你改了其他也不會有效果的。。
legendpos，註釋文字的位置，預設是”east“，還可以是”west“、”south“和”north，但只能確定佈局的位置，不能調節具體的距離。。
接下來再介紹一個Paper.popup
非常簡單，共有五個引數，前面三個分別是x、y和文字內容，第四個是direction，即方向，可以是left、right、down和up中的一個。size表示padding值，預設是5。
示例：
paper.popup(50,50,'$9.99','down');
g.raphael就介紹到這裡了。官網還有一部分關於動作的api，以及一些橫向的圖我沒有列舉出來。（比如橫向的柱狀圖）並不是很複雜，大家可以自己去官網檢視api研究研究一下即可。時間關係，g.raphael的內容就研究到這裡啦。