使用HTML5 RGraph插件绘制统计图 绘制不同颜色的柱状图

我们看一个使用RGraph插件制作柱状图的示例程序，该示例程序的功能为显示2010年常州第一百货公司长虹彩电销售情况的统计柱状图。

如下图：

该示例程序的完整代码如下所示。

1. 
   

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

7. 
   

8. 
   

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

    
    

11. 
    

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

13. 
    

14. 
    

15. 
    

16. 
    

复制代码

使用obj．getBar方法

在绘制柱状图时，可以使用一个obj .getBar方法来使开发者或用户知道哪个柱子被单击，或获得鼠标焦点。该方法返回一个数组，其中存有以下信息：

用于绘制统计图对象的canvas元素。
被单击柱子的绘制起点在X轴上的坐标点被单击柱子的绘制起点在Y轴上的坐标点被单击柱子的宽度被单击柱子的高度被单击柱子的序号（标示第几根柱子被单击）。

下面看一个使用该方法的示例。该示例在上一个示例的基础上稍加修改，每次单击柱状图中的一根柱子都会使这根柱子变为不同的颜色。

代码如下所示：
每次单击柱子将使该柱子变为不同的颜色

1. 
   

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

7. 
   

8. 
   

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

    
    

11. 
    

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

13. 
    

14. 
    

15. 
    

16. 
    

复制代码

文章来源于HTML5星空：http://www.html5star.com/article-110-1.html