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

HTML5星空

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

HTML5 RGraph 第十二章 绘制分组横向柱状图

2013-11-11 23:39| 发布者: mydream| 查看: 1187| 评论: 0|原作者: mydream

摘要: HTML5 RGraph绘制分组横向柱状图 接下来介绍一个使用RGraph插件绘制分组横向柱状图的示例程序。该示例程序都是反映2010年常州第一百货公司长虹牌与康佳牌彩电的销售情况,只不过这一次使用横向柱状图作为统计 ...
HTML5 RGraph  绘制分组横向柱状图

接下来介绍一个使用RGraph插件绘制分组横向柱状图的示例程序。该示例程序都是反映2010年常州第一百货公司长虹牌与康佳牌彩电的销售情况,只不过这一次使用横向柱状图作为统计图。
如图所示:
HTML5 RGraph绘制分组横向柱状图

完整代码如下:
  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.Hbar.js"></script>
  7. <script>
  8. function window_onload()
  9. {
  10.     //绘制分组横向柱状图,指定数据
  11.     myGraph = new RGraph.HBar('myCanvas',[[1200,1600],[1300,1200],[1400,1200],
  12.      [1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900],
  13.      [2500,1100],[2700,1000],[1400,1600],[2600,1200]]);
  14.     //指定统计图标题
  15.     myGraph.Set('chart.title','2010年常州第一百货公司彩电销售图');
  16.     //指定X轴标题
  17.     myGraph.Set('chart.title.xaxis','销售台数');
  18.     //指定Y轴标题
  19.     myGraph.Set('chart.title.yaxis','销售月份');
  20.     //指定柱状图图例被绘制在图例区域中
  21.     myGraph.Set('chart.key.position', 'graph');
  22.    //指定图例文字   
  23.     myGraph.Set('chart.key', ['长虹', '康佳']);   
  24.     //指定柱子颜色
  25.     myGraph.Set('chart.colors', ['blue', 'green']);
  26.     //指定Y轴的坐标轴文字
  27.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  28.     '11月','12月']);
  29.     //指定在坐标轴右端绘制说明销售台数的文字
  30.     myGraph.Set('chart.labels.above',true);
  31.     //指定网格自动与坐标轴单位对齐
  32.     myGraph.Set('chart.background.grid.autofit', true);
  33.     myGraph.Set('chart.background.grid.autofit.align', true);
  34.     //指定标签文字所使用的空间尺寸
  35.     myGraph.Set('chart.gutter',45);   
  36.     //绘制分组横向柱状图
  37.     myGraph.Draw();     
  38. }
  39. </script>
  40. </head>  
  41. <body onload="window_onload()">  
  42. <h1>使用RGraph插件制作横向柱状图</h1>  
  43. <canvas id="myCanvas" width="900" height="400">
  44.      [您的浏览器不支持canvas元素]
  45. </canvas>
  46. </body>  
  47. </html>
复制代码






鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯
发布主题

     京ICP备14042305号

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

GMT+8, 2019-8-26 16:55 , Processed in 0.104331 second(s), 33 queries .

返回顶部