用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）
首先，這里有個g.raphael.js的范例文章，可以直接看，我就不轉載了：
http://www.cnblogs.com/lhb25/archive/2013/01/09/gRaphael-javascript-chart-library.html
好了，接下來我們來試試創建柱狀圖：
<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了。
接下來簡單講解一下柱狀圖，
var paper = Raphael("x",650,400);這一句是創建raphael畫布，創建位置是我們的id “x”，也就是生成于div中。寬度是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，就不解釋了。第三個帶引號的參數是你的注釋內容。最后一個是旋轉角，用文字不方便說明，我用兩張圖來給大家看一下就明白了：
這一張圖的角度是60度。它的角度計算方法是以y軸為起點逆時針的計算。
這一張圖是120度，看出來了吧，其實就是注釋塊的圓塊在旋轉。不過可惜的是注釋塊不能改顏色……
接下來是點狀圖，這個用的并不多：
先看看例子：
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的內容就研究到這里啦。
官網api：http://g.raphaeljs.com/reference.html
總結
以上是生活随笔為你收集整理的用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用g.raphael.js高速绘制饼图、
- 下一篇： Webstorm PhpStorm的序