HTML5 RGraph插件绘制统计图第十章绘制范围折线图

2013-11-10 21:58| 发布者: admin| 查看: 2579| 评论: 0|原作者: admin|来自: html5星空社区

摘要: 绘制范围折线图，是指绘制上下两根折线，上部的折线用于反映统计范围内的峰值，下部的折线用于反映统计范围内的谷值，然后用某种颜色填充上下两根折线之间的封闭区域，使人能够一目了然每一个绘制单位（例如每个月 ...

绘制范围折线图

绘制范围折线图，是指绘制上下两根折线，上部的折线用于反映统计范围内的峰值，下部的折线用于反映统计范围内的谷值，然后用某种颜色填充上下两根折线之间的封闭区域，
使人能够一目了然每一个绘制单位（例如每个月）中某个统计值的峰值与谷值情况。
接下来看一个示例程序，该程序反映2010年常州第一百货公司长虹彩电的销售情况，上部的折线反映每个月中该彩电的销售峰值（最多一天能卖掉多少台），下部的折线反映每
月的销售谷值（最少一天能卖掉多少台）。
效果图如下：

HTML5 RGraph插件绘制范围折线图

制作范围折线图的关键在于在统计图中使用如下几个属性：

口在指定数据来源时使用两个数组来分别指定峰值数组与谷值数组，代码如下所示。
myGraph  =  new  RGraph _ Line ( ' myCanvas ' ,[160, 130, 140, 160, 300, 190, 200, 210, 250, 270, 140, 260] ,[120, 120, 120, 150, 180, 1200 120, 160, 190, 110, 100, 160] )
口使用chart.colors属性设置上下两根折线的折线颜色，代码如下所示。
myGraph . Set ( ' chart . colors ' ,    [ ' blue ' J )
口使用chart.fillstyle属性设置上下两根折线区域之间的填充颜色，代码如下所示。
myGraph . Set ( ' chart . fillstyle ' ,    ' lightgreen ' )  ;
口将chart.filled属性的属性值设为true，表示用指定的填充颜色填充折线内部区域，代码如下所示。
myGraph. Set ( ' chart . filled ' , true) ;
口将chart．filled．range属性的属性值设为true，表示只填充上下两根折线之间的区域，代码如下所示。
myGraph . Set ( ' chart . filled . range ' , true)|

该示例程序的完整代码如下：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用RGraph插件制作折线图</title>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script>
function window_onload()
{
//绘制折线图，指定数据
myGraph = new RGraph.Line('myCanvas',
[160,130,140,160,300,190,200,210,250,270,140,260],
[120,120,120,150,180,120,120,160,190,110,100,160]);
//指定折线图标题
myGraph.Set('chart.title','2010年常州第一百货公司长虹彩电销售图');
//指定X轴标题
myGraph.Set('chart.title.xaxis','销售月份');
//指定Y轴标题
myGraph.Set('chart.title.yaxis','销售台数');
//指定折线颜色
myGraph.Set('chart.colors', ['blue']);
//指定X轴的坐标轴文字
myGraph.Set('chart.labels', ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
'11月','12月']);
//指定Y轴的坐标轴文字
myGraph.Set('chart.ylabels.specific',['300','250','200','150','100','50']);
//指定折线区域内的填充颜色
myGraph.Set('chart.fillstyle', 'lightgreen');
//用指定的填充颜色填充折线内部区域
myGraph.Set('chart.filled',true);
//指定只填充上下两根折线之间的区域
myGraph.Set('chart.filled.range',true);
//指定网格颜色
myGraph.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
//指定标签文字的绘制空间
myGraph.Set('chart.gutter', 60);
//绘制折线图
myGraph.Draw();
}
</script>
</head>
<body onload="window_onload()">
<h1>使用RGraph插件制作折线图</h1>
<canvas id="myCanvas" width="700" height="400">
[您的浏览器不支持canvas元素]
</canvas>
</body>
</html>