请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 查看内容

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

2013-11-10 21:58| 发布者: admin| 查看: 1688| 评论: 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)|

该示例程序的完整代码如下:
  1. <!DOCTYPE html>   
  2. <head>   
  3. <meta charset="UTF-8">  
  4. <title>使用RGraph插件制作折线图</title>  
  5. <script src="RGraph.common.core.js"></script>
  6. <script src="RGraph.line.js"></script>
  7. <script src="RGraph.common.tooltips.js"></script>

  8. <script>
  9. function window_onload()
  10. {
  11.     //绘制折线图,指定数据
  12.      myGraph = new RGraph.Line('myCanvas',
  13.       [160,130,140,160,300,190,200,210,250,270,140,260],
  14.       [120,120,120,150,180,120,120,160,190,110,100,160]);
  15.     //指定折线图标题
  16.     myGraph.Set('chart.title','2010年常州第一百货公司长虹彩电销售图');
  17.     //指定X轴标题
  18.     myGraph.Set('chart.title.xaxis','销售月份');
  19.     //指定Y轴标题
  20.     myGraph.Set('chart.title.yaxis','销售台数');      
  21.     //指定折线颜色
  22.     myGraph.Set('chart.colors', ['blue']);
  23.     //指定X轴的坐标轴文字
  24.     myGraph.Set('chart.labels', ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  25.     '11月','12月']);
  26.     //指定Y轴的坐标轴文字  
  27.     myGraph.Set('chart.ylabels.specific',['300','250','200','150','100','50']);
  28.     //指定折线区域内的填充颜色
  29.     myGraph.Set('chart.fillstyle', 'lightgreen');
  30.     //用指定的填充颜色填充折线内部区域
  31.     myGraph.Set('chart.filled',true);
  32.     //指定只填充上下两根折线之间的区域
  33.     myGraph.Set('chart.filled.range',true);
  34.    //指定网格颜色
  35.     myGraph.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
  36.     //指定标签文字的绘制空间
  37.     myGraph.Set('chart.gutter', 60);
  38.     //绘制折线图   
  39.     myGraph.Draw();
  40. }   
  41. </script>
  42. </head>  
  43. <body onload="window_onload()">  
  44. <h1>使用RGraph插件制作折线图</h1>  
  45. <canvas id="myCanvas" width="700" height="400">
  46.      [您的浏览器不支持canvas元素]
  47. </canvas>
  48. </body>  
  49. </html>
复制代码








鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-21 09:02 , Processed in 0.089267 second(s), 33 queries .

返回顶部