利用canvas可以直接在頁面中繪制各種復雜的圖形，其中引用到一個Rgraph的插件。
Rgraph插件使用非常方便，只需幾步就可以完成一個折線圖、餅圖、柱狀圖，或是其中兩者圖形的結合！
(1) 引用RGraph.common.core.js這個腳本文件，這個是插件的核心腳本，必須引用，否則不可用。但是在測試時，發現有時會報錯，沒用引用jQuery的插件，所以報錯時，需引用這個jquery-1.4.1.js的這個腳本文件；
(2) 需根據業務需用繪制的圖形引用對應的腳本文件。
例如繪制柱狀圖需引用RGraph.bar.js腳本文件；
繪制折線圖需引用RGraph.line.js腳本文件；
繪制餅圖需引用RGraph.pie.js腳本文件；
繪制橫向柱狀圖需引用RGraph.hbar.js腳本文件；
如果要有鼠標移動圖上要有提示信息，需引用RGraph.common.tooltips.js腳本文件；
如果要鼠標右鍵有菜單項，需引用RGraph.common.context.js腳本文件；
(3) 在頁面中添加canvas元素，代碼如下：
<canvas id="myCanvas" width="700" height="400">
[你的瀏覽器不支持canvas元素]
</canvas>
(4) 繪制統計圖的關鍵代碼：
1.繪制柱狀圖：
var myGraph = new RGraph.Bar("myCanvas", [1200, 1300, 1400, 1500, 3000, 1900, 2000, 2100, 2500, 2700, 1400, 2600]); //繪制柱狀圖，指定數據
myGraph.Set("chart.title", "XXXX商場冰箱銷售圖"); //指定統計圖標題
myGraph.Set("chart.title.xaxis", "銷售月份"); //指定x軸標題
myGraph.Set("chart.title.yaxis", "銷售台數"); //指定y軸標題
myGraph.Set("chart.labels", ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']); //指定x軸坐標軸的文字
myGraph.Set("chart.ylabels.specific", ['3000', '2500', '2000', '1500', '1000', '500']); //指定y軸坐標軸的文字
myGraph.Set("chart.labels.above", true); //指定在坐標軸頂部繪制說明銷售數量的文字
myGraph.Set("chart.background.grid.autofit", true); //指定網格自動與坐標軸單位對齊
myGraph.Set("chart.background.grid.autofit.align", true); //指定網格自動與坐標軸單位對齊
myGraph.Set("chart.gutter", 65); //指定標簽文字所使用的空間文字
myGraph.Draw(); //繪制柱狀圖
2.繪制折線圖：
代碼如下：
var myGraph = new RGraph.Line("myCanvas", [1100, 1420, 1460, 1580, 3090, 1920, 2010, 2120, 2720, 2120, 1720, 2690]); //繪制柱狀圖，指定數據
myGraph.Set("chart.title", "XXXX商場冰箱銷售圖"); //指定統計圖標題
myGraph.Set("chart.title.xaxis", "銷售月份"); //指定x軸標題
myGraph.Set("chart.title.yaxis", "銷售台數"); //指定y軸標題
myGraph.Set("chart.labels", ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']); //指定x軸坐標軸的文字
myGraph.Set("chart.ylabels.specific", [ '3000', '2500', '2000', '1500', '1000', '500']); //指定y軸坐標軸的文字
myGraph.Set("chart.labels.above", true); //指定在坐標軸頂部繪制說明銷售數量的文字
myGraph.Set("chart.background.grid.color", 'rgba(238,238,238,1)'); //指定網格自動與坐標軸單位對齊
myGraph.Set("chart.gutter", 65); //指定標簽文字所使用的空間文字
myGraph.Draw(); //繪制柱狀圖
3.繪制餅圖：
代碼如下：
var pie = new RGraph.Pie("myCanvas", [560, 340, 120, 150, 350, 190]); //繪制柱狀圖，指定數據
pie.Set("chart.title", "XXXX商場冰箱銷售圖"); //指定統計圖標題
pie.Set("chart.labels", ['長虹(18%)', '康佳(7%)', '格力(12%)', '三星(17%)', '海爾(24%)', '美的(22%)']); //繪制餅圖文字
pie.Set("chart.key", ['長虹(18%)', '康佳(7%)', '格力(12%)', '三星(17%)', '海爾(24%)', '美的(22%)']); //添加使用圖例
pie.Set("chart.key.background",'white');
pie.Set("chart.linewidth", 5);
pie.Set("chart.strokestyle", 'white'); //繪制餅圖分割線
pie.Set("chart.tooltips.effect", 'fade');
pie.Set("chart.tooltips.event", 'onmousemove');
pie.Set("chart.tooltips", ['長虹(18%)', '康佳(7%)', '格力(12%)', '三星(17%)', '海爾(24%)', '美的(22%)']); //指定工具條上提示信息文字
pie.Set('chart.highlight.style', '3d');
//繪制環形餅圖
// pie.Set('chart.variant', 'donut');
pie.Draw(); //繪制柱狀圖
4.繪制橫向柱狀圖：
代碼如下：
var myGraph = new RGraph.HBar("myCanvas", [1100, 1420, 1460, 1580, 3090, 1920, 2010, 2120, 2720, 2120, 1720, 2690]); //繪制柱狀圖，指定數據
myGraph.Set("chart.title", "XXXX商場冰箱銷售圖"); //指定統計圖標題
myGraph.Set("chart.title.xaxis", "銷售月份"); //指定x軸標題
myGraph.Set("chart.title.yaxis", "銷售台數"); //指定y軸標題
myGraph.Set("chart.labels", ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']); //指定x軸坐標軸的文字
myGraph.Set("chart.labels.above", true); //指定在坐標軸頂部繪制說明銷售數量的文字
myGraph.Set("chart.background.grid.autofit", true); //指定網格自動與坐標軸單位對齊
myGraph.Set("chart.background.grid.autofit.align", true); //指定網格自動與坐標軸單位對齊
myGraph.Set("chart.gutter", 40); //指定標簽文字所使用的空間文字
myGraph.Draw(); //繪制柱狀圖
