注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

html5图形库RGraph的应用  

2015-03-08 20:57:52|  分类: web app开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

说明:虽然开源,可是并不免费,所以还是用于学习与非商业环境较好。

更多详细资料:http://www.rgraph.net

使用html客户端图形库如RGraph(基于jqery库)对比服务器端生成图表的优点是:

  • 节约带宽,b/s间传输数据参数,而非图形数据;
  • 图形渲染在客户端执行,因此减少服务器负担,生成图表的负担;
  • 服务器端开发变的简单,只需传输数据即可;
  • 支持交互功能,基于ajax技术的使用,提高了页面的应变速度;

      RGraph支持的图表类型多,同时支持标签与光标附加信息展示。

        RGraph所支持图表类型:

* Bar charts            柱状

* Bi-polar charts    极区

* Donut charts       圆环图

* Fuel charts          油量表

* Gauge charts      测量表

* Gantt charts        甘特

* Horizontal bar charts      水平柱状

* Horizontal progress bar 水平进度条图

* LED Grid  LED     网格

* Line charts            线图

* Meter charts          路程(环)

* Odometer charts  里程表(全环)

* Pie charts              饼图

* Radar charts         达图

* Rose charts           玫瑰

* Radial scatter charts 辐射图

* Scatter charts             散形

* Thermometer charts  温度

* Vertical progress bar 竖直进度条

*  Waterfall charts         瀑布

   

     二次开发过程:

    1) 引用RGraph.common.core.js这个脚本文件,这个是插件的核心脚本,必须引用,否则不可用。但是在测试时,发现有时会报错,没用引用jQuery的插件,所以报错时,需引用这个jquery.js的这个脚本文件;

   2) 需根据业务需用绘制的图形引用对应的脚本文件。

        例如绘制柱状图需引用RGraph.bar.js脚本文件;

              绘制折线图需引用RGraph.line.js脚本文件;

              绘制饼图需引用RGraph.pie.js脚本文件;

              绘制横向柱状图需引用RGraph.hbar.js脚本文件;

              如果要有鼠标移动图上要有提示信息,需引用RGraph.common.tooltips.js脚本文件;

              如果要鼠标右键有菜单项,需引用RGraph.common.context.js脚本文件;

   3) 在页面中添加canvas元素,代码如下:

      <canvas id="myCanvas"  width="700" height="400">
         [你的浏览器不支持canvas元素]
       </canvas>

 4) 绘制统计图的关键代码:

      1))绘制柱状图例子

          var myGraph = new RGraph.Bar("myCanvas", [1200, 1300, 1400, 1500, 3000, 1900, 2000, 2100, 2500, 2700, 1400, 2600]); //绘制柱状图,指定数据
            myGraph.Set("chart.title", "XXXX商场冰箱销售图"); //指定统计图标题
            myGraph.Set("chart.title.xaxis", "销售月份");  //指定x轴标题
            myGraph.Set("chart.title.yaxis", "销售台数"); //指定y轴标题
            myGraph.Set("chart.labels", ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']); //指定x轴坐标轴的文字
            myGraph.Set("chart.ylabels.specific", ['3000', '2500', '2000', '1500', '1000', '500']);  //指定y轴坐标轴的文字
            myGraph.Set("chart.labels.above", true); //指定在坐标轴顶部绘制说明销售数量的文字
            myGraph.Set("chart.background.grid.autofit", true);  //指定网格自动与坐标轴单位对齐
            myGraph.Set("chart.background.grid.autofit.align", true);  //指定网格自动与坐标轴单位对齐
            myGraph.Set("chart.gutter", 65); //指定标签文字所使用的空间文字

           myGraph.Draw(); //绘制柱状图
           

html5图形库RGraph的应用 - itoedr - itoedr的it学苑
   

   2))绘制折线图举例

     代码如下:

           var myGraph = new RGraph.Line("myCanvas", [1100, 1420, 1460, 1580, 3090, 1920, 2010, 2120, 2720, 2120, 1720, 2690]); //绘制柱状图,指定数据
            myGraph.Set("chart.title", "XXXX商场冰箱销售图"); //指定统计图标题
            myGraph.Set("chart.title.xaxis", "销售月份");  //指定x轴标题
            myGraph.Set("chart.title.yaxis", "销售台数"); //指定y轴标题
            myGraph.Set("chart.labels", ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']); //指定x轴坐标轴的文字
            myGraph.Set("chart.ylabels.specific", [ '3000', '2500', '2000', '1500', '1000', '500']);  //指定y轴坐标轴的文字
            myGraph.Set("chart.labels.above", true); //指定在坐标轴顶部绘制说明销售数量的文字
            myGraph.Set("chart.background.grid.color", 'rgba(238,238,238,1)');  //指定网格自动与坐标轴单位对齐
            myGraph.Set("chart.gutter", 65); //指定标签文字所使用的空间文字
            myGraph.Draw(); //绘制柱状图

        

html5图形库RGraph的应用 - itoedr - itoedr的it学苑
 

   3))绘制饼图举例

      代码如下:

         var pie = new RGraph.Pie("myCanvas", [560, 340, 120, 150, 350, 190]); //绘制柱状图,指定数据
           pie.Set("chart.title", "XXXX商场冰箱销售图"); //指定统计图标题
           pie.Set("chart.labels", ['长虹(18%)', '康佳(7%)', '格力(12%)', '三星(17%)', '海尔(24%)', '美的(22%)']); //绘制饼图文字
           pie.Set("chart.key", ['长虹(18%)', '康佳(7%)', '格力(12%)', '三星(17%)', '海尔(24%)', '美的(22%)']); //添加使用图例
           pie.Set("chart.key.background",'white');
           pie.Set("chart.linewidth", 5);
           pie.Set("chart.strokestyle", 'white'); //绘制饼图分割线
           pie.Set("chart.tooltips.effect", 'fade');
           pie.Set("chart.tooltips.event", 'onmousemove');
           pie.Set("chart.tooltips", ['长虹(18%)', '康佳(7%)', '格力(12%)', '三星(17%)', '海尔(24%)', '美的(22%)']); //指定工具条上提示信息文字
           pie.Set('chart.highlight.style', '3d');
           //绘制环形饼图
           //           pie.Set('chart.variant', 'donut');
           pie.Draw(); //绘制柱状图

      

html5图形库RGraph的应用 - itoedr - itoedr的it学苑
 

     4))绘制横向柱状图举例

     代码如下:

          var myGraph = new RGraph.HBar("myCanvas", [1100, 1420, 1460, 1580, 3090, 1920, 2010, 2120, 2720, 2120, 1720, 2690]); //绘制柱状图,指定数据
            myGraph.Set("chart.title", "XXXX商场冰箱销售图"); //指定统计图标题
            myGraph.Set("chart.title.xaxis", "销售月份");  //指定x轴标题
            myGraph.Set("chart.title.yaxis", "销售台数"); //指定y轴标题
            myGraph.Set("chart.labels", ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']); //指定x轴坐标轴的文字
            myGraph.Set("chart.labels.above", true); //指定在坐标轴顶部绘制说明销售数量的文字
            myGraph.Set("chart.background.grid.autofit", true);  //指定网格自动与坐标轴单位对齐
            myGraph.Set("chart.background.grid.autofit.align", true);  //指定网格自动与坐标轴单位对齐
            myGraph.Set("chart.gutter", 40); //指定标签文字所使用的空间文字
            myGraph.Draw(); //绘制柱状图

        

html5图形库RGraph的应用 - itoedr - itoedr的it学苑
  评论这张
 
阅读(464)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017