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

HTML5星空

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

使用HTML5 RGraph插件绘制统计图 第四章 绘制分组柱状图

2013-11-8 21:16| 发布者: mydream| 查看: 1818| 评论: 0|原作者: mydream|来自: HTML5社区论坛

摘要: HTML5 RGraph绘制分组柱状图 接下来看两个绘制分组柱状图的示例,第一个示例为在水平坐标轴的一个坐标单位上绘制多根柱子,第二个示例为在一根柱子上使用多种颜色。 1.在一个坐标单位上绘制多根柱子 首先来 ...
HTML5 RGraph绘制分组柱状图
接下来看两个绘制分组柱状图的示例,第一个示例为在水平坐标轴的一个坐标单位上绘制多根柱子,第二个示例为在一根柱子上使用多种颜色。


1.在一个坐标单位上绘制多根柱子
首先来看如何在水平坐标轴的一个坐标单位上绘制多根柱子,本示例为2010年常州第一百货公司彩电销售情况的统计柱状图,其中只统计了长虹彩电与康佳彩电的销售数量。在一个月份中绘制两根柱子,一根柱子为长虹彩电在该月份的销售数量,另一根柱子为康佳彩电在该月份的销售数量。分别使用蓝色与绿色绘制两种不同的柱子,在图例中说明蓝色柱子表示长虹彩电的销售数量,绿色柱子表示康佳彩电的销售数量,在每根柱子顶部绘制该柱子所代表的销售数量。
如下图所示:



   在一个坐标单位上绘制多根柱子代码如下:
  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.bar.js"></script>
  7. <script>
  8. function window_onload()
  9. {
  10.     //绘制分组柱状图,指定数据
  11.     myGraph = new RGraph.Bar('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.     //指定X轴的坐标轴文字
  27.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  28.     '11月','12月']);
  29.     //指定Y轴的坐标轴文字
  30.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  31.     //指定在坐标轴顶部绘制说明销售台数的文字
  32.     myGraph.Set('chart.labels.above',true);
  33.     //用文字说明销售量最少的柱子
  34.     myGraph.Set('chart.labels.ingraph', [19,'销售最少']);
  35.     //指定网格自动与坐标轴单位对齐
  36.     myGraph.Set('chart.background.grid.autofit', true);
  37.     myGraph.Set('chart.background.grid.autofit.align', true);
  38.     //指定标签文字所使用的空间尺寸
  39.     myGraph.Set('chart.gutter',65);   
  40.     myGraph.Draw();     
  41. }
  42. </script>
  43. </head>  
  44. <body onload="window_onload()">  
  45. <h1>使用RGraph插件制作柱状图</h1>  
  46. <canvas id="myCanvas" width="900" height="400">
  47.      [您的浏览器不支持canvas元素]
  48. </canvas>
  49. </body>  
  50. </html>
复制代码
2.将一根柱子分为几层颜色

接下来介绍如何用HTML5 RGraph使用多种颜色绘制柱状图中的每一根柱子。本示例的功能与“在一个坐标单位上绘制多根柱子”示例的功能大致相同,都是显示2010年常州第一百货公司长虹与康佳这两种彩电的销售情况,但是本示例的说明方法不是在一个月份中使用两种颜色的柱子,而是将长虹与康佳这两种彩电每月的销量绘制在同一根柱子中。这里使用两种不同的颜色进行绘制,在下部绘制用来说明康佳彩电销售数量的绿色柱子,在上部绘制用来说明长虹彩电销售数量的蓝色柱子。使用这种方法的好处在于既可以看出两种彩电各自的销售数量,又可以直接看出这两种彩电的销售总数量。该示例效果图如下:


    这个示只是将chart.grouplng属性的属性值设成了stacked,并且将在chart.ylabels.specific中指定的垂直坐标轴上的坐标数字增加到了5000(原来为单种彩电的最大销售数量,现在修改为两种彩电总的最大销售数量),完整代码如下:
  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.bar.js"></script>
  7. <script>
  8. function window_onload()
  9. {
  10.     //绘制分组柱状图,指定数据
  11.     myGraph = new RGraph.Bar('myCanvas',[[1200,1600],[1300,1200],[1400,1200],
  12.      [1500,1600],[3000,1800],[1900,1200],[2000,1600],[2100,1900],[2500,1100],
  13.      [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.     //指定X轴的坐标轴文字
  27.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  28.     '11月','12月']);
  29.     //指定Y轴的坐标轴文字
  30.     myGraph.Set('chart.ylabels.specific',['5000','4500','4000','3500','3000','2500','2000',
  31.     '1500','1000','500']);
  32.     //指定在坐标轴顶部绘制说明销售总数量的文字
  33.     myGraph.Set('chart.labels.above',true);
  34.    //指定网格自动与坐标轴单位对齐
  35.     myGraph.Set('chart.background.grid.autofit', true);
  36.     myGraph.Set('chart.background.grid.autofit.align', true);
  37.     //指定标签文字所使用的空间尺寸
  38.     myGraph.Set('chart.gutter',65);
  39.     //设置分组柱状图的绘制方式
  40.     myGraph.Set('chart.grouping', 'stacked');   
  41.     myGraph.Draw();     
  42. }
  43. </script>
  44. </head>  
  45. <body onload="window_onload()">  
  46. <h1>使用RGraph插件制作柱状图</h1>  
  47. <canvas id="myCanvas" width="900" height="400">
  48.      [您的浏览器不支持canvas元素]
  49. </canvas>
  50. </body>  
  51. </html>  
复制代码

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯

     京ICP备14042305号

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

GMT+8, 2019-12-11 11:42 , Processed in 0.123230 second(s), 37 queries .

返回顶部