HTML5 RGraph 第十三章绘制横向柱状图

2013-11-11 23:33| 发布者: mydream| 查看: 2172| 评论: 0|原作者: mydream|来自: html5星空论坛

摘要: HTML5 RGraph绘制横向柱状图本节具体介绍如何使用RGraph插件绘制横向柱状图。在讲解实例前，先来看一下在绘制横向柱状图时所用到的属性。绘制横向柱状图时所用到的属性除了前面所讲的绘制所有统计图时用 ...

HTML5 RGraph绘制横向柱状图
本节具体介绍如何使用RGraph插件绘制横向柱状图。在讲解实例前，先来看一下在绘制横向柱状图时所用到的属性。

绘制横向柱状图时所用到的属性
除了前面所讲的绘制所有统计图时用到的属性外，绘制横向柱状图时还会用到如下属性。

1背景相关属性
口chart.background.barcolorl
设置柱状图背景网格中的奇数行（从上往下数）的背景颜色（默认为白色）。
口chart.background.barcolor2
设置柱状图背景网格中的偶数行（从上往下致）的背景颜色（默认为白色）。
口chart.background.grid
指定是否显示背景网格。默认值为true（显示）。
口chart.background.grid.color
设置背景网格线的颜色。默认颜色为#ddd。
口chart.background.grid.hsize
设置背景网格的每格宽度。默认值为40。
口chart.background.grid.vsize
设置背景网格的每格高度。默认值为180
口chart.background.grid.width
设置背景网格线宽。允许属性值不为整数（例如0.5）
口chart.background.grid.border
设置是否在背景网格周围绘制一个边框线。默认值为true 。
口chart.background.grid.hlines
设置是否绘制背景网格中的水平线。默认值为true 。
口chart.background.grid.vlines
设置是否绘制背景网格中的垂直线。默认值为true。
口chart.background.grid.autofit
不指定背景网格中每格宽度或高度，只指定绘制多少条垂直线与水平线，然后采用自动计算方式。默认值为false（不采用这种方式）
口chart.background.grid.autofit.numhlines
指定当使用自动计算方式绘制背景网格时需要绘制的水平线条数。默认值为7
口chart.background.grid.autofit.numvlines
指定当使用自动计算方式绘制背景网格时需要绘制的垂直线条数。口chan.background.grid.autofit.align
指定背景网格线是否自动与坐标轴刻度对齐。默认值为false。

2．标签相关属性
口chart.xlabels
用于设置是否绘制水平坐标轴
口chart．1abels．above
该值为tme时，将会在每根柱子的右端显示一个具体说明该柱子所代表数值的数字。默
认值为falseo
口chan.1abels.above.decimals
用于设置坐标轴每根柱子右端数值精度（允许精确到小数点后几位）默认值为0

3．标题相关属性
口chan．title．xaxis
设置水平坐标轴的标题文字。默认值为none（不设置标题文字）
口chan．title．yaxis
设置垂直坐标轴的标题文字。默认值为none（不设置标题文字）。
口chart.title.xaxis.pos
用该值乘以在chart．gutter属性中所设置的值得到水平坐标轴标题文字的位置。默认值为0.25。
口chart.title.yaxis.pos
用该值乘以在chart．gutter属性中所设置的值得到垂直坐标轴标题文字的位置。默认值为0.25。

4．格式与坐标轴相美属性
口chan．scale．thousand
用于指定数值的千位分隔符。默认值为“，”。
口chart．xmax
用于设置水平坐标轴上数字的最大值。如果不指定，则该值将被自动计算出来。默认值为null。（自动计算）
口chan．xmin
用于设置水平坐标轴上数字的最小值。默认值为0。
口chan．yaxispos
用于指定垂直坐标轴的位置。可以指定的值为left（左端）或center（中央）o默认值为left。
口chan．axis．color
用于指定坐标轴颜色。默认值为black（黑色）

5．其他相关属性
口chart．grouping
用于在绘制分组柱状图时指定分组形式。可以指定的值为grouped（在Y轴上的同一个单位上绘制多根柱子）或stacked（将一根柱子分为几层颜色）默认值为grouped.
口chart．vmargin
用于设置每根柱子与网格线的相隔距离（以像素为单位）o默认值为5
口chart.strokestyle
用于设置绘制柱状图中每根柱子的边框颜色。默认值为black

示例程序
接下来介绍一个使用RGraph插件制作横向柱状图的示例程序，该示例程序是反映2010年常州第一百货公司长虹彩电销售情况，不过这一次使用横向柱状图来作为统计图。该示例程序在浏览器中打开时的显示效果如图所示:

HTML5 RGraph绘制横向柱状图

完整代码如下：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用RGraph插件制作横向柱状图</title>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.hbar.js"></script>
<script>
function window_onload()
{
//绘制横向柱状图，指定数据
myGraph = new RGraph.HBar('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','销售月份');
//指定Y轴的坐标轴文字
myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
'11月','12月']);
//指定在坐标轴右端绘制说明销售数量的文字
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',45);
//绘制横向柱状图
myGraph.Draw();
}
</script>
</head>
<body onload="window_onload()">
<h1>使用RGraph插件制作横向柱状图</h1>
<canvas id="myCanvas" width="700" height="400">
[您的浏览器不支持canvas元素]
</canvas>
</body>
</html>