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

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


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

在一个坐标单位上绘制多根柱子代码如下：

1. 
   

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

7. 
   

8. 
   

10. 使用RGraph插件制作柱状图

    
    

11. 
    

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

13. 
    

14. 
    

15. 
    

16. 
    

复制代码

2．将一根柱子分为几层颜色

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

这个示只是将 chart.grouplng 属性的属性值设成了stacked，并且将在 chart.ylabels.specific 中指定的垂直坐标轴上的坐标数字增加到了5000（原来为单种彩电的最大销售数量，现在修改为两种彩电总的最大销售数量），完整代码如下：

1. 
   

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

7. 
   

8. 
   

10. 使用RGraph插件制作柱状图

    
    

11. 
    

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

13. 
    

14. 
    

15. 
    

16. 
    

复制代码

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