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

HTML5星空

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

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

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

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


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


该示例效果如下图:



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


  1. <!DOCTYPE html>   
  2. <head>   
  3. <meta charset="UTF-8">  
  4. <title>在一个统计图中同时绘制柱状图与折线图</title>  
  5. <script src="RGraph.common.core.js"></script>
  6. <script src="RGraph.bar.js"></script>
  7. <script src="RGraph.line.js"></script>
  8. <script>
  9. function window_onload()
  10. {
  11.     //绘制柱状图,指定数据
  12.     myBar = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
  13.     2500,2700,1400,2600]);
  14.    //指定统计图标题
  15.     myBar.Set('chart.title','2010年常州第一百货公司彩电销售图');
  16.     //指定X轴标题
  17.     myBar.Set('chart.title.xaxis','销售月份');
  18.     //指定Y轴标题
  19.     myBar.Set('chart.title.yaxis','销售台数');
  20.     //指定X轴的坐标轴文字
  21.     myBar.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  22.     '11月','12月']);
  23.     //指定Y轴的坐标轴文字
  24.     myBar.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  25.     //指定网格自动与坐标轴单位对齐   
  26.     myBar.Set('chart.background.grid.autofit', true);
  27.     myBar.Set('chart.background.grid.autofit.align', true);
  28.     //指定标签文字所使用的空间尺寸
  29.     myBar.Set('chart.gutter',65);
  30.     myBar.Draw();

  31.     //绘制折线图,指定数据
  32.     var myLine = new RGraph.Line('myCanvas',[1600,1200,1200,1600,1800,1200,1200,1600,
  33.     1900,1100,1000,1600]);
  34.     //指定折线与图例中的颜色
  35.     myLine.Set('chart.colors', ['red', 'blue']);  
  36.     //指定图例文字
  37.     myLine.Set('chart.key', ['康佳', '长虹']);
  38.    //指定Y轴的坐标轴文字
  39.     myLine.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  40.      //指定线宽
  41.     myLine.Set('chart.linewidth', 3);
  42.     //指定不绘制网格
  43.     myLine.Set('chart.background.grid', false);
  44.     //指定标签文字的绘制空间
  45.     myLine.Set('chart.gutter', 65);
  46.     //绘制折线图   
  47.     myLine.Draw();
  48. }

  49. </script>
  50. </head>  
  51. <body onload="window_onload()">  
  52. <h1>在一个统计图中同时绘制柱状图与折线图</h1>  
  53. <canvas id="myCanvas" width="700" height="400">
  54.      [您的浏览器不支持canvas元素]
  55. </canvas>
  56. </body>  
  57. </html>
复制代码





鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯
发布主题

     京ICP备14042305号

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

GMT+8, 2017-9-25 08:48 , Processed in 0.082344 second(s), 32 queries .

返回顶部