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

设为首页

收藏本站

html5作品展

官方QQ群

开启辅助访问

HTML5星空

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

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

2013-11-8 11:13| 发布者: mydream| 查看: 3649| 评论: 1|原作者: mydream|来自: HTML5星空论坛

摘要: 我们看一个使用RGraph插件制作柱状图的示例程序，该示例程序的功能为显示2010年常州第一百货公司长虹彩电销售情况的统计柱状图。 如下图： 该示例程序的完整代码如下所示。!DOCTYPE html head me ...


    我们看一个使用RGraph插件制作柱状图的示例程序，该示例程序的功能为显示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,1300,1400,1500,3000,1900,2000,2100,
  12.     2500,2700,1400,2600]);
  13.    //指定统计图标题
  14.     myGraph.Set('chart.title','2010年常州第一百货公司长虹彩电销售图');
  15.     //指定X轴标题
  16.     myGraph.Set('chart.title.xaxis','销售月份');
  17.     //指定Y轴标题
  18.     myGraph.Set('chart.title.yaxis','销售台数');
  19.     //指定X轴的坐标轴文字
  20.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  21.     '11月','12月']);
  22.     //指定Y轴的坐标轴文字
  23.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  24.     //指定在坐标轴顶部绘制说明销售数量的文字
  25.     myGraph.Set('chart.labels.above', true);
  26.     //指定网格自动与坐标轴单位对齐   
  27.     myGraph.Set('chart.background.grid.autofit', true);
  28.     myGraph.Set('chart.background.grid.autofit.align', true);
  29.     //指定标签文字所使用的空间尺寸
  30.     myGraph.Set('chart.gutter',65);
  31.     //绘制柱状图
  32.     myGraph.Draw();
  33. }
  34. </script>
  35. </head>  
  36. <body onload="window_onload()">  
  37. <h1>使用RGraph插件制作柱状图</h1>  
  38. <canvas id="myCanvas" width="700" height="400">
  39.      [您的浏览器不支持canvas元素]
  40. </canvas>
  41. </body>  
  42. </html>
复制代码


使用obj．getBar方法

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

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

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

代码如下所示：
每次单击柱子将使该柱子变为不同的颜色
  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. //指定颜色数组，用于变换颜色
  9. var color=new Array;
  10. color[0]='red';
  11. color[1]='green';
  12. color[2]='blue';
  13. function window_onload()
  14. {
  15.     //绘制柱状图，指定数据
  16.     myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
  17.     2500,2700,1400,2600]);
  18.    //指定统计图标题
  19.     myGraph.Set('chart.title','2010年常州第一百货公司长虹彩电销售图');
  20.     //指定X轴标题
  21.     myGraph.Set('chart.title.xaxis','销售月份');
  22.     //指定Y轴标题
  23.     myGraph.Set('chart.title.yaxis','销售台数');
  24.     //指定X轴的坐标轴文字
  25.     myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  26.     '11月','12月']);
  27.     //指定Y轴的坐标轴文字
  28.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  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',65);
  36.     //绘制柱状图
  37.     myGraph.Draw();
  38.     //注册控件
  39.     RGraph.Register(myGraph);
  40.     var i=0;//填充时使用颜色的颜色序号
  41.     myGraph.canvas.onclick = function (e)
  42.     {
  43.         RGraph.Redraw();//重绘统计图
  44.    
  45.         var canvas  = e.target;//获取被点击的canvas元素
  46.         var context = canvas.getContext('2d');//获取该canvas元素的图形上下文对象
  47.         var obj     = canvas.__object__;//获取统计图对象
  48.         var coords  = obj.getBar(e);//获取被点击的柱子信息
  49.         
  50.         if (coords) {
  51.             var top    = coords[1];//获取被点击柱子的X轴上的坐标起点
  52.             var left   = coords[2];//获取被点击柱子的Y轴上的坐标起点
  53.             var width  = coords[3];//获取被点击柱子的宽度
  54.             var height = coords[4];//获取被点击柱子的高度
  55.             
  56.             context.beginPath();//开始创建路径
  57.             context.strokeStyle = 'black';//指定柱子的边框颜色
  58.             context.fillStyle =color[i%3];//指定柱子的填充颜色
  59.             i+=1;//指定下次使用颜色的颜色编号
  60.             context.strokeRect(top, left, width, height);//绘制柱子边框
  61.             context.fillRect(top, left, width, height);//填充柱子
  62.         }
  63.     }
  64. }
  65. </script>
  66. </head>  
  67. <body onload="window_onload()">  
  68. <h1>使用RGraph插件制作柱状图</h1>  
  69. <canvas id="myCanvas" width="700" height="400">
  70.      [您的浏览器不支持canvas元素]
  71. </canvas>
  72. </body>  
  73. </html>
复制代码

鲜花
握手
雷人
路过
鸡蛋
收藏 分享 邀请
上一篇：使用HTML5 RGraph插件绘制统计图 第二章 绘制柱状图所用属性介绍下一篇：使用HTML5 RGraph插件绘制统计图 第四章 绘制分组柱状图

相关阅读

发表评论

最新评论

引用 snice 2014-11-2 14:32
不错，刚好适合我的项目

查看全部评论(1)

相关分类

下级分类

更多资源及Java+大数据个人原创视频，
可关注本站官方公众号观看：
快讯

     京ICP备14042305号

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

GMT+8, 2020-9-20 00:04 , Processed in 0.095406 second(s), 36 queries .

返回顶部