HTML5 RGraph繪製分組柱狀圖
接下來看兩個繪製分組柱狀圖的示例，第一個示例爲在水平座標軸的一個座標單位上繪製多根柱子，第二個示例爲在一根柱子上使用多種顏色。
1．在一個座標單位上繪製多根柱子
首先來看如何在水平座標軸的一個座標單位上繪製多根柱子，本示例爲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,1600],[1300,1200],[1400,1200],
[1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900],
[2500,1100],[2700,1000],[1400,1600],[2600,1200]]);
//指定統計圖標題
myGraph.Set('chart.title','2010年常州第一百貨公司彩電銷售圖');
//指定X軸標題
myGraph.Set('chart.title.xaxis','銷售月份');
//指定Y軸標題
myGraph.Set('chart.title.yaxis','銷售臺數');
//指定柱狀圖圖例被繪製在圖例區域中
myGraph.Set('chart.key.position', 'graph');
//指定圖例文字
myGraph.Set('chart.key', ['長虹', '康佳']);
//指定柱子顏色
myGraph.Set('chart.colors', ['blue', 'green']);
//指定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.labels.ingraph', [19,'銷售最少']);
//指定網格自動與座標軸單位對齊
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="900" height="400">
[您的瀏覽器不支持canvas元素]
</canvas>
</body>
</html>
接下來介紹如何用HTML5 RGraph使用多種顏色繪製柱狀圖中的每一根柱子。本示例的功能與“在一個座標單位上繪製多根柱子”示例的功能大致相同，都是顯示2010年常州第一百貨公司長虹與康佳這兩種彩電的銷售情況，但是本示例的說明方法不是在一個月份中使用兩種顏色的柱子，而是將長虹與康佳這兩種彩電每月的銷量繪製在同一根柱子中。這裏使用兩種不同的顏色進行繪製，在下部繪製用來說明康佳彩電銷售數量的綠色柱子，在上部繪製用來說明長虹彩電銷售數量的藍色柱子。使用這種方法的好處在於既可以看出兩種彩電各自的銷售數量，又可以直接看出這兩種彩電的銷售總數量。該示例效果圖如下：
這個示只是將chart.grouplng屬性的屬性值設成了stacked，並且將在chart.ylabels.specific中指定的垂直座標軸上的座標數字增加到了5000（原來爲單種彩電的最大銷售數量，現在修改爲兩種彩電總的最大銷售數量），完整代碼如下：
<!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,1600],[1300,1200],[1400,1200],
[1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900],[2500,1100],
[2700,1000],[1400,1600],[2600,1200]]);
//指定統計圖標題
myGraph.Set('chart.title','2010年常州第一百貨公司彩電銷售圖');
//指定X軸標題
myGraph.Set('chart.title.xaxis','銷售月份');
//指定Y軸標題
myGraph.Set('chart.title.yaxis','銷售臺數');
//指定柱狀圖圖例被繪製在圖例區域中
myGraph.Set('chart.key.position', 'graph');
//指定圖例文字
myGraph.Set('chart.key', ['長虹', '康佳']);
//指定柱子顏色
myGraph.Set('chart.colors', ['blue', 'green']);
//指定X軸的座標軸文字
myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
'11月','12月']);
//指定Y軸的座標軸文字
myGraph.Set('chart.ylabels.specific',['5000','4500','4000','3500','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.Set('chart.grouping', 'stacked');
myGraph.Draw();
}
</script>
</head>
<body
<h1>使用RGraph插件製作柱狀圖</h1>
<canvas id="myCanvas" width="900" height="400">
[您的瀏覽器不支持canvas元素]
</canvas>
</body>
</html>
本文來源HTML5星空：http://www.html5star.com/article-112-1.html