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

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


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

210936narcx970q00y8yqm.png



在一个坐标单位上绘制多根柱子代码如下:
  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

  45. <h1>使用RGraph插件制作柱状图</h1>

  46. <canvas id="myCanvas" width="900" height="400">

  47. [您的浏览器不支持canvas元素]

  48. </canvas>

  49. </body>

  50. </html>


复制代码
2.将一根柱子分为几层颜色

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

210602q3i3f91fqw1t9udq.png


这个示只是将 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

  46. <h1>使用RGraph插件制作柱状图</h1>

  47. <canvas id="myCanvas" width="900" height="400">

  48. [您的浏览器不支持canvas元素]

  49. </canvas>

  50. </body>

  51. </html>


复制代码


本文来源HTML5星空:http://www.html5star.com/article-112-1.html


你可能感兴趣的:(html5,RGraph,HTML5统计图)