利用canvas可以直接在页面中绘制各种复杂的图形,其中引用到一个Rgraph的插件。

Rgraph插件使用非常方便,只需几步就可以完成一个折线图、饼图、柱状图,或是其中两者图形的结合!

(1) 引用RGraph.common.core.js这个脚本文件,这个是插件的核心脚本,必须引用,否则不可用。但是在测试时,发现有时会报错,没用引用jQuery的插件,所以报错时,需引用这个jquery-1.4.1.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(); //绘制柱状图
           

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(); //绘制柱状图

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(); //绘制柱状图

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(); //绘制柱状图

利用canvas和RGraph作图的更多相关文章

  1. 利用 canvas 破解 某拖动验证码

    利用 canvas 破解 某拖动验证码 http://my.oschina.net/u/237940/blog/337194

  2. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  3. 利用canvas实现的中点Bresenham算法

    Bresenham提出的直线生成算法的基本原理是,每次在最大位移方向上走一步,而另一个方向是走步还是不走步取决于误差项的判别,具体的实现过程大家可以去问度娘.我主要是利用canvas画布技术实现了这个 ...

  4. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  5. HTML5利用canvas,把多张图合并成一张图片

    需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...

  6. 利用canvas将网页元素生成图片并保存在本地

    利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...

  7. 利用canvas对上传图片进行上传前压缩

    利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...

  8. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  9. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

随机推荐

  1. 组合使用QT的资源管理高级功能简化开发过程

    使用 QT 进行团队开发的时候,常常碰到一个问题,就是如何共同管理资源?甚至一个人进行开发的时候如何简化资源的维护,避免无谓的消耗? 如果可以做到在开发的时候,大家把美工做的图片(往往是程序员先自己随 ...

  2. ITMS-SERVICES://方式安装IPA在IOS 7.1中的变化

    转:https://laoyur.com/?p=414 iOS7.1中,通过itms-services://方式安装ipa已经发生了改变,.plist文件必须是https://的,.ipa文件的链接则 ...

  3. HDU 1233 还是畅通工程(Kruskal)

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  4. [科普]什么是SysWow64

    Wow!什么是Wow64 今天有个同事,被SysWow64搞晕了.这里简单介绍一下. 64位的Windows并不是简单地把所有东西都编译成64位就万事大吉的.关于64位的CPU应该做成什么样子,Int ...

  5. 系统根据用户cookies,为用户打上各种标签

    DSP营销学院_品友学院 | 品友推广官网 http://e.ipinyou.com/school_article40.html 智能算法+动态出价=最大发挥推广费用的价值 针对每一个曝光进行甄别和竞 ...

  6. <2014 08 29> MATLAB的软件结构与模块、工具箱简示

    MATLAB的系统结构:三个层次.九个部分 ----------------------------------- 一.基础层 是整个系统的基础,核心内容是MATLAB部分. 1.软件主包MATLAB ...

  7. SpringMVC 之 RESTful 风格的增删改查

    1. 视图和视图解析器 视图解析器 请求处理方法执行完成后,最终返回一个ModelAndView对象,对于返回String,View 或 ModelMap 等类型的处理方法, SpringMVC 也会 ...

  8. Python--(并发编程之线程Part2)

    GIL只能保证垃圾回收机制的安全,进程中的数据安全还是需要自定义锁 线程执行代码首先要抢到GIL全局锁,假设线程X首先抢到,以为要抢到自定义锁要执行代码,所以这个线程在执行代码的时候就很容抢到了自定义 ...

  9. Linux命令详情

  10. 10046 trace详解(1)

    10046 trace帮助我们解析一条/多条SQL.PL/SQL语句的运行状态,这些状态包括:Parse/Fetch/Execute三个阶段中遇到的等待事件.消耗的物理和逻辑读.CPU时间.执行计划等 ...