下面小编就为大家带来一篇js封装成插件_canvas统计图插件编写实例。小编觉得挺不错的，现在就分享js源码给大家，也给大家做个参考。对js感兴趣的一起跟随小编过来看看吧
之前就说过，我想写一个canvas画统计图的插件，现在写好了
先说下实现的功能吧：
1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图
2.可以选择画折现图还是柱形统计图，或者两者都实现
立即学习“Java免费学习笔记（深入）”；
3.可以自由定义折现颜色，坐标颜色，柱形图颜色 和canvas边框颜色，当然边框你也可以选择要或者不要
4.可以选择是否实现柱形图和折现图的动画实现
实现过程
画坐标——画箭头——做X轴和Y轴的标注——画柱形图——画折现图
话不多说，上代码
(function(window,document){ var ChartDraws = function(options){ if(!(this instanceof ChartDraws))return new ChartDraws(options); this.options = $.extend({ //报表所需的参数 "containerId" : "", //canvas所在容器id "canvasWidth" : 400, "canvasHeight" : 300, "paddingLeft" : 20, "paddingTop" : 20, "columnChartData" :[], //柱形图的数量和对应得名称以及百分比 "yChartData" :[], //y轴的数量及名称 "axisColor" : "white", //坐标轴颜色 "columnChartColor" : "#EEE685", //柱形图颜色 "isNeedAnimation" : true, //是否需要动画 "isNeedLineChart" : true, //是否需要折线图 "isNeedColumnChart" : true, //是否需要柱形图 "lineChartColor" : "#90EE90", //折线图颜色，当isNeedLineChart=true时有效 "isNeedBorder" : false, //canvas是否需要外边框 "borderColor" : "white" //外边框颜色 },options); if(this.options.canvasWidth2) { for(var i=1;i下面还有一个是实现requestAnimationFrame浏览器兼容的
(function(){ var lastTime = 0; var prefixes = ['ms','webkit','o','moz']; //各浏览器前缀 var requestAnimationFrame = window.requestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame; var prefix; //通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式 for( var i = 0; i 附上调用
ChartDraws({ "containerId" : "chart1", //canvas所在容器id "canvasWidth" : 1000, "canvasHeight" : 250, "paddingLeft" : 50, "paddingTop" : 50, "columnChartData": [ {NO:0,PT:0.2,Name:"Html/Css"}, {NO:1,PT:0.4,Name:"Html5/Css3"}, {NO:2,PT:0.4,Name:"JavaScript"}, {NO:3,PT:0.5,Name:"JQuery"}, {NO:4,PT:0.2,Name:"Angular.js"}, {NO:5,PT:0.8,Name:"BootStrap"}, {NO:6,PT:0.6,Name:"React.js"}, {NO:7,PT:0.5,Name:"Java"} ], "yChartData" : [ {NO:0,Name:"熟悉"}, {NO:1,Name:"掌握"}, {NO:2,Name:"精通"} ], "isNeedAnimation" : false, "isNeedBorder" : false, "isNeedLineChart":true, "axisColor" : "#8DEEEE" }); ChartDraws({ "containerId" : "chart2", //canvas所在容器id "canvasWidth" : 1000, "canvasHeight" : 250, "paddingLeft" : 50, "paddingTop" : 50, "columnChartData": [ {NO:0,PT:0.4,Name:"Html/Css"}, {NO:1,PT:0.5,Name:"Html5/Css3"}, {NO:2,PT:0.2,Name:"JavaScript"}, {NO:3,PT:0.7,Name:"JQuery"}, {NO:4,PT:0.2,Name:"Angular.js"}, {NO:5,PT:0.3,Name:"BootStrap"}, {NO:6,PT:0.8,Name:"React.js"}, {NO:7,PT:0.2,Name:"Java"} ], "yChartData" : [ {NO:0,Name:"熟悉"}, {NO:1,Name:"掌握"}, {NO:2,Name:"精通"} ], "isNeedAnimation" : false, "isNeedBorder" : false, "isNeedLineChart":false, "isNeedColumnChart" : true, "columnChartColor":"#9370DB" }); ChartDraws({ "containerId" : "chart3", //canvas所在容器id "canvasWidth" : 1000, "canvasHeight" : 250, "paddingLeft" : 50, "paddingTop" : 50, "columnChartData": [ {NO:0,PT:0.4,Name:"Html/Css"}, {NO:1,PT:0.5,Name:"Html5/Css3"}, {NO:2,PT:0.2,Name:"JavaScript"}, {NO:3,PT:0.7,Name:"JQuery"}, {NO:4,PT:0.2,Name:"Angular.js"}, {NO:5,PT:0.3,Name:"BootStrap"}, {NO:6,PT:0.8,Name:"React.js"}, {NO:7,PT:0.2,Name:"Java"} ], "yChartData" : [ {NO:0,Name:"熟悉"}, {NO:1,Name:"掌握"}, {NO:2,Name:"精通"} ], "isNeedAnimation" : false, "isNeedBorder" : true, "isNeedLineChart":true, "isNeedColumnChart" : false, "lineChartColor" : "#8DB6CD", "borderColor" : "#87CEFA" })
登录后复制
html代码
登录后复制
下面是一个实现后的效果图
在整个编码的过程中我把代码改过一次，为什么改呢，因为在第一次的时候我在js里面使用了大量的 ChartDraws.prototype.XXXX = function(){};
后来我一想不对啊，我为什么要把这么多的方法暴露给外部呢......这不是没事找事么.......
所以现在就改成这样了，如果有不对的地方和可以改进的地方，希望路过的指点下，谢谢！还有那个白条代码背景怎么删不掉...........
相关推荐：
JavaScript构造器模式实例分析
javascript如何计算对象长度
javascript中的typeof和类型判断详解
以上就是js封装成插件_Canvas统计图插件编写实例_javascript技巧的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789535.html
