為什么80%的碼農都做不了架構師？>>> ??

/* * Canvas line * Author:SongYi * Date:2015-06-29 * Version:0.1 */ (function(){ /* ***************************************************************************** Handle the options ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ******************************************************************************/ var defaultOptions = {colors: ['#00A600', '#D94600', '#921AFF', '#E800E8', '#C6A300', '#f7a35c',?'#8085e9', '#f15c80', '#e4d354', ?'#91e8e1'],datas:[],global: {width:630,height:275,border:true,borderStyle:"1px solid #000"},chart: {marginLeft:80,marginRight:10,marginTop:5,marginBottom:30,lineWidth:1,yStep : 40,xStep : 60,yRatio : 0,xRatio : 0,yMax : 10000, ? ??yMin : 0,xMax : 0,xMin : 0,yRealMax:0,yRealMin:0},title: {textY: '',textX: '(s)',style: {color: '#000000',font: '11pt Arial'}},labels: {marginLeft:25,marginTop:5,style: {color: '#000000',font: '9pt Arial'}} };function Canvasy(userOptions){var options = extend(defaultOptions,userOptions);this.get = function(n){return options[n];}this.set = function(n,v){options[n] = v;}this.init(); }Canvasy.prototype = {/*** Initialize the chart*/init: function () {var ctx = this.get("ctx");var global = this.get("global");ctx.setAttribute('width',global.width);ctx.setAttribute('height',global.height);ctx = ctx.getContext("2d");ctx.clearRect(0,0,global.width,global.height);this.initOption();this.setTitleY();this.drawAxis();this.drawGridlinesX();this.drawGridlinesY();this.setAxisLabelX();this.setAxisLabelY();this.drawLines();},initOption:function(){var global = this.get("global");var chart = this.get("chart");var lines = this.get("datas");chart.baseY = global.height - chart.marginBottom;chart.baseX = global.width - chart.marginRight;chart.yStep = (global.height - chart.marginTop - chart.marginBottom)/6;chart.xStep = (global.width - chart.marginLeft - chart.marginRight)/9;chart.yRatio = (chart.baseY-chart.marginTop)/(chart.yMax-chart.yMin);this.set("chart",chart);},setTitleY:function(){var ctx = this.get("ctx").getContext("2d");var chart = this.get("chart");ctx.save();ctx.rotate(-90 * Math.PI / 180);ctx.font = this.get("title").style.font;ctx.fillStyle = this.get("title").style.color;ctx.textAlign = 'center';ctx.fillText(this.get("title").textY,-80,20);ctx.restore();},drawAxis:function(){// X axisvar ctx = this.get("ctx").getContext("2d");var global = this.get("global");var chart = this.get("chart");ctx.beginPath();ctx.lineWidth = 2;ctx.strokeStyle="#000000";ctx.moveTo(chart.marginLeft,global.height-chart.marginBottom);ctx.lineTo(global.width-chart.marginRight,global.height-chart.marginBottom);ctx.stroke();ctx.beginPath();ctx.lineWidth = 2;ctx.strokeStyle="#000000";ctx.moveTo(chart.marginLeft,chart.marginTop);ctx.lineTo(chart.marginLeft,global.height-chart.marginBottom);ctx.stroke();},drawGridlinesX:function(){var ctx = this.get("ctx").getContext("2d");var height = this.get("global").height;var lines = this.get("datas");var chart = this.get("chart");if(typeof lines !== 'undefined' && lines.length > 0){if(chart.xMax < 10 || isInteger(chart.xMax)){for(var i=2; i<=10;i++){ctx.beginPath();ctx.lineWidth = 1;ctx.strokeStyle="#D7D7D7";ctx.moveTo((i-1)*chart.xStep+chart.marginLeft,chart.marginTop);ctx.lineTo((i-1)*chart.xStep+chart.marginLeft,height-chart.marginBottom);ctx.stroke();} ?}else{var xAxisMax = Math.floor(chart.xMax);for(var i=0;i<9;i++){ctx.beginPath();ctx.lineWidth = 1;ctx.strokeStyle="#D7D7D7";ctx.moveTo(chart.baseX-((chart.xMax-xAxisMax)+i)*chart.xStep,chart.marginTop);ctx.lineTo(chart.baseX-((chart.xMax-xAxisMax)+i)*chart.xStep,height-chart.marginBottom);ctx.stroke();}}}},drawGridlinesY:function(){var ctx = this.get("ctx").getContext("2d");var width = this.get("global").width;var chart = this.get("chart");for(var i=0; i<=5;i++){ctx.beginPath();ctx.lineWidth = 1;ctx.strokeStyle="#D7D7D7";ctx.moveTo(chart.marginLeft,i*chart.yStep+5);ctx.lineTo(width-chart.marginRight,i*chart.yStep+5);ctx.stroke();}},drawLines:function(){var ctx = this.get("ctx").getContext("2d");var lines = this.get("datas");var colors = this.get("colors");var chart = this.get("chart");var global = this.get("global");ctx.save();ctx.rect(chart.marginLeft,chart.marginTop,global.width-chart.marginLeft-chart.marginRight,global.height-chart.marginBottom-chart.marginTop);ctx.stroke();ctx.clip();ctx.lineCap="round";if(lines !== null && typeof lines !== 'undefined'){for(var i=0;i<lines.length;i++){var line = lines[i];for(var j=1;j<line.data.length;j++){var xPoint = line.data[j-1];var point = line.data[j];ctx.beginPath();ctx.strokeStyle=colors[i];if(line.focus){ctx.lineWidth = 4*chart.lineWidth;}else{ctx.lineWidth = chart.lineWidth;}ctx.moveTo(chart.baseX-round((chart.xMax-xPoint.x)*chart.xStep),chart.baseY-round(xPoint.y*chart.yRatio));ctx.lineTo(chart.baseX-round((chart.xMax-point.x)*chart.xStep),chart.baseY-round(point.y*chart.yRatio));ctx.stroke();}}?}ctx.restore();},setAxisLabelY:function(){var ctx = this.get("ctx").getContext("2d");var chart = this.get("chart");var global = this.get("global");var labels = this.get("labels");ctx.font = labels.style.font;ctx.fillStyle=labels.style.color;for(var i=0;i<=6;i++){ctx.fillText(round(chart.yRealMin+round((chart.yRealMax-chart.yRealMin)/6)*i),labels.marginLeft,chart.baseY-i*chart.yStep+labels.marginTop);}},setAxisLabelX:function(){var ctx = this.get("ctx").getContext("2d");var lines = this.get("datas");var chart = this.get("chart");var labels = this.get("labels");var height = this.get("global").height;ctx.font = labels.style.font;ctx.fillStyle=labels.style.color;if(typeof lines !== 'undefined' && lines.length > 0){if(chart.xMax < 10){for(var i=0; i<10;i++){ctx.fillText(i,i*chart.xStep+chart.marginLeft,height-18);}chart.xMax = 9;}else{var xAxisMax = Math.floor(chart.xMax);for(var i=0;i<9;i++){ctx.fillText(xAxisMax-i,chart.baseX-((chart.xMax-xAxisMax)+i)*chart.xStep-10,height-18);}}}ctx.font = this.get("title").style.font;ctx.fillStyle = this.get("title").style.color;ctx.fillText(this.get("title").textX,chart.baseX-30,height-5);},setOptions:function(options){for(var p in options){this.set(p,options[p]);}this.init();},addPoint:function(points){if(points == null || points == 'undefined'){return;}var lines = this.get("datas");for(var i=0;i<lines.length;i++){if(isArray(points)){for(var j=0;j<points.length;j++){if(points[j].name == lines[i].name){lines[i].data.push(points[j].data);}}}else{if(points.name == lines[i].name){lines[i].data.push(points.data);}}}this.set("datas",lines);this.init();},resize:function(width,height,drawFlag){var ctx = this.get("ctx");var global = this.get("global");global.width = width;global.height = height;ctx.setAttribute('width',width);ctx.setAttribute('height',height);if(drawFlag){this.init();}else{ctx = ctx.getContext("2d");ctx.clearRect(0,0,width,height);}} } // The Highcharts namespace window.Canvasy = window.Canvasy || Canvasy;/*** Extend an object with the members of another* @param {Object} a The object to be extended* @param {Object} b The object to add to the first one*/ var extend = Canvasy.extend = function (a, b) {var n;if (!a) {a = {};}for (n in b) {a[n] = b[n];}return a; }; /*** Check for string* @param {Object} s*/ function isString(s) {return typeof s === 'string'; } /*** Check for object* @param {Object} obj*/ function isObject(obj) {return obj && typeof obj === 'object'; }function isInteger(obj) {return Math.floor(obj) === obj } /*** Check for array* @param {Object} obj*/ function isArray(obj) {return Object.prototype.toString.call(obj) === '[object Array]'; } /*** Check for number* @param {Object} n*/ function isNumber(n) {return typeof n === 'number'; }function round(n){return Math.round(n*1000)/1000; }/*** Non-recursive method to find the lowest member of an array. Math.min raises a maximum* call stack size exceeded error in Chrome when trying to apply more than 150.000 points.?* This method is slightly slower, but safe.*/ function arrayMin(data) {if(data == null || data.length == 0){return 0;}var i = data.length,min = data[0];while (i--) {if (data[i] < min) {min = data[i];}}return min; } function arrayMax(data) {if(data == null || data.length == 0){return 0;}var i = data.length,max = data[0];while (i--) {if (data[i] > max) {max = data[i];}}return max; } /*** Provide error messages for debugging, with links to online explanation?*/ function error (code, stop) {var msg = 'Canvasy error #' + code + ': ' + code;if (stop) {throw msg;}// else ...if (window.console) {console.log(msg);} }})()

轉載于:https://my.oschina.net/edens/blog/475562

總結

以上是生活随笔為你收集整理的Canvas 波形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。