HTML5 RGraph 第十章在一个统计图中绘制柱状图与折线图

2013-11-11 15:38| 发布者: mydream| 查看: 2461| 评论: 0|原作者: mydream

摘要: HTML5 RGraph 在一个统计图中绘制柱状图与折线图下面是反映2010年常州第一百货公司长虹与康佳两种彩电的销售情况，使用柱状图来体现长虹彩电每个月的销售数量，使用折线图来体现康佳彩电每个月的销售数量。 ...

HTML5 RGraph 在一个统计图中绘制柱状图与折线图

下面是反映2010年常州第一百货公司长虹与康佳两种彩电的销售情况，使用柱状图来体现长虹彩电每个月的销售数量，使用折线图来体现康佳彩电每个月的销售数量。

该示例效果如下图：

在一个统计图中同时绘制柱状图与折线图的关键也在于，在同一个canvas元素中绘制一个柱状图与一个折线图，然后通过属性设置使其看上去为一个统计图。该示例程序的完整代码如下所示：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>在一个统计图中同时绘制柱状图与折线图</title>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.line.js"></script>
<script>
function window_onload()
{
//绘制柱状图，指定数据
myBar = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
2500,2700,1400,2600]);
//指定统计图标题
myBar.Set('chart.title','2010年常州第一百货公司彩电销售图');
//指定X轴标题
myBar.Set('chart.title.xaxis','销售月份');
//指定Y轴标题
myBar.Set('chart.title.yaxis','销售台数');
//指定X轴的坐标轴文字
myBar.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
'11月','12月']);
//指定Y轴的坐标轴文字
myBar.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
//指定网格自动与坐标轴单位对齐
myBar.Set('chart.background.grid.autofit', true);
myBar.Set('chart.background.grid.autofit.align', true);
//指定标签文字所使用的空间尺寸
myBar.Set('chart.gutter',65);
myBar.Draw();
//绘制折线图，指定数据
var myLine = new RGraph.Line('myCanvas',[1600,1200,1200,1600,1800,1200,1200,1600,
1900,1100,1000,1600]);
//指定折线与图例中的颜色
myLine.Set('chart.colors', ['red', 'blue']);
//指定图例文字
myLine.Set('chart.key', ['康佳', '长虹']);
//指定Y轴的坐标轴文字
myLine.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
//指定线宽
myLine.Set('chart.linewidth', 3);
//指定不绘制网格
myLine.Set('chart.background.grid', false);
//指定标签文字的绘制空间
myLine.Set('chart.gutter', 65);
//绘制折线图
myLine.Draw();
}
</script>
</head>
<body onload="window_onload()">
<h1>在一个统计图中同时绘制柱状图与折线图</h1>
<canvas id="myCanvas" width="700" height="400">
[您的浏览器不支持canvas元素]
</canvas>
</body>
</html>