我們看一個使用RGraph插件製作柱狀圖的示例程序，該示例程序的功能爲顯示2010年常州第一百貨公司長虹彩電銷售情況的統計柱狀圖。
如下圖：
該示例程序的完整代碼如下所示。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用RGraph插件製作柱狀圖</title>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
<script>
function window_onload()
{
//繪製柱狀圖，指定數據
myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
2500,2700,1400,2600]);
//指定統計圖標題
myGraph.Set('chart.title','2010年常州第一百貨公司長虹彩電銷售圖');
//指定X軸標題
myGraph.Set('chart.title.xaxis','銷售月份');
//指定Y軸標題
myGraph.Set('chart.title.yaxis','銷售臺數');
//指定X軸的座標軸文字
myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
'11月','12月']);
//指定Y軸的座標軸文字
myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
//指定在座標軸頂部繪製說明銷售數量的文字
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();
}
</script>
</head>
<body
<h1>使用RGraph插件製作柱狀圖</h1>
<canvas id="myCanvas" width="700" height="400">
[您的瀏覽器不支持canvas元素]
</canvas>
</body>
</html>
使用obj．getBar方法
在繪製柱狀圖時，可以使用一個obj .getBar方法來使開發者或用戶知道哪個柱子被單擊，或獲得鼠標焦點。該方法返回一個數組，其中存有以下信息：
用於繪製統計圖對象的canvas元素。
被單擊柱子的繪製起點在X軸上的座標點被單擊柱子的繪製起點在Y軸上的座標點被單擊柱子的寬度被單擊柱子的高度被單擊柱子的序號（標示第幾根柱子被單擊）。
下面看一個使用該方法的示例。該示例在上一個示例的基礎上稍加修改，每次單擊柱狀圖中的一根柱子都會使這根柱子變爲不同的顏色。
代碼如下所示：
每次單擊柱子將使該柱子變爲不同的顏色
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用RGraph插件製作柱狀圖</title>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
<script>
//指定顏色數組，用於變換顏色
var color=new Array;
color[0]='red';
color[1]='green';
color[2]='blue';
function window_onload()
{
//繪製柱狀圖，指定數據
myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
2500,2700,1400,2600]);
//指定統計圖標題
myGraph.Set('chart.title','2010年常州第一百貨公司長虹彩電銷售圖');
//指定X軸標題
myGraph.Set('chart.title.xaxis','銷售月份');
//指定Y軸標題
myGraph.Set('chart.title.yaxis','銷售臺數');
//指定X軸的座標軸文字
myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
'11月','12月']);
//指定Y軸的座標軸文字
myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
//指定在座標軸頂部繪製說明銷售數量的文字
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();
//註冊控件
RGraph.Register(myGraph);
var i=0;//填充時使用顏色的顏色序號
myGraph.canvas.onclick = function (e)
{
RGraph.Redraw();//重繪統計圖
var canvas = e.target;//獲取被點擊的canvas元素
var context = canvas.getContext('2d');//獲取該canvas元素的圖形上下文對象
var obj = canvas.__object__;//獲取統計圖對象
var coords = obj.getBar(e);//獲取被點擊的柱子信息
if (coords) {
var top = coords[1];//獲取被點擊柱子的X軸上的座標起點
var left = coords[2];//獲取被點擊柱子的Y軸上的座標起點
var width = coords[3];//獲取被點擊柱子的寬度
var height = coords[4];//獲取被點擊柱子的高度
context.beginPath();//開始創建路徑
context.strokeStyle = 'black';//指定柱子的邊框顏色
context.fillStyle =color[i%3];//指定柱子的填充顏色
i+=1;//指定下次使用顏色的顏色編號
context.strokeRect(top, left, width, height);//繪製柱子邊框
context.fillRect(top, left, width, height);//填充柱子
}
}
}
</script>
</head>
<body
<h1>使用RGraph插件製作柱狀圖</h1>
<canvas id="myCanvas" width="700" height="400">
[您的瀏覽器不支持canvas元素]
</canvas>
</body>
</html>
文章來源於HTML5星空：http://www.html5star.com/article-110-1.html