封裝構造函數，用canvas寫餅狀圖和柱狀圖

封裝函數

// 場景 function XDLScence( options ) {this.stage = options.stage;//執行場景的初始化this.init = options.init || XDLScence.voidFn;//執行場景的進場動畫this.pre = options.pre || XDLScence.voidFn;//執行場景的出場動畫this.post = options.post || XDLScence.voidFn;this.layers = options.layers || [new Konva.Layer()];this.name = options.name || '';this.init(); }XDLScence.prototype = {constructor: XDLScence,voidFn: function() {},CurrentScence: null,//場景要進入舞臺，只需要調用場景的 play方法。play: function () {var _this = this;// doPre,var doPre = function doPre() {// stage.add(_this.layer);// 把當前層添加到舞臺_this.layers.forEach(function( val ){_this.stage.add( val );});XDLScence.currentScene = _this;_this.pre();};//如果不是第一個場景，先執行當前場景的出場動畫，然后執行下一個場景的入場動畫//需要在場景的post方法中執行傳進去的 next 方法。if (XDLScence.currentScene) {//執行上一個場景的出場動畫XDLScence.currentScene.post(doPre);} else {//如果是第一個場景直接執行入場動畫doPre();}}// play };//=============>S=============柱狀圖數據demo // var data = [{ // name: '百度', value: .2, color: 'lightgreen'// },{// name: '阿里', value: .4, color: 'lightgreen'// },{// name: '新浪', value: .1, color: 'lightgreen'// },{// name: '搜狐', value: .1, color: 'lightgreen'// },{// name: '360', value: .2, color: 'lightgreen'// }];//柱狀圖構造函數 function Histogram(option) {this.group = new Konva.Group({x: option.x,y: option.y});this.init(option); }//柱狀圖的原型對象 Histogram.prototype = {constructor: Histogram,init: function( option ) {option.data = option.data || [];//底線的寬度option.blWidth = option.blWidth || 2;option.blColor = option.blColor || 'lightgreen';option.width = option.width || 200;option.height = option.height || 200;option.fontSize = option.fontSize || 12;//把最高的柱狀圖的高度換算成 柱狀圖要求的高度。var maxValue = 0;for(var i = 0; i < option.data.length; i++ ) {maxValue = maxValue > option.data[i].value ? maxValue : option.data[i].value;}option.height = option.height / maxValue;//創建底線var bottomLine = new Konva.Line({strokeWidth: option.blWidth,stroke: option.blColor,points: [ 0, 0, option.width, 0 ],lineCap: 'round',lineJoin: 'round'});this.group.add( bottomLine );//rectWidthvar rectAllWidth = option.width / option.data.length;for(var i = 0; i < option.data.length; i++ ) {var tempData = option.data[i];//創建每個柱狀圖var rect = new Konva.Rect({x: rectAllWidth * (1/4 + i),y: -1 * (option.height * tempData.value) - 1/2*option.blWidth,width: 1/2 * rectAllWidth,height: option.height * tempData.value,fill: tempData.color,shadowBlur: 5,shadowColor: tempData.color,// shadowOffset: {x : 10, y : 10},shadowOpacity: 0.5,opacity: .5,name: 'histogramRect',cornerRadius: 5});//創建 柱狀圖百分比文本var text = new Konva.Text({x: rectAllWidth * i,y: -1 * (option.height * tempData.value) - 1/2*option.blWidth - option.fontSize -3,fontSize: option.fontSize,fill: tempData.color,fontFamily: '微軟雅黑',text: tempData.value * 100 + '%',name: 'txt',width: rectAllWidth,align: 'center'});//創建 柱狀圖名字文本var nameText = new Konva.Text({x: rectAllWidth * (1/2 + i),y: option.blWidth + 3,fontSize: option.fontSize,fill: tempData.color,fontFamily: '微軟雅黑',text: tempData.name,rotation: 30});this.group.add( rect );this.group.add( text );this.group.add( nameText );}},playAnimate: function() {this.group.to({duration: .1,opacity: 1});this.group.find('.histogramRect').each(function( value, index ) {var oldY = value.y();var oldHeight = value.height();value.y(0);value.height(0);value.to({duration: .8,y: oldY,height: oldHeight,opacity: .9});});this.group.find(".txt").each(function(val){var oldY = val.y();val.y(0);val.opacity(.1);val.to({duration: .8,y: oldY,opacity: 1});});},addToGroupOrLayer: function( group ) {group.add(this.group);} }; /*使用案例dmeo：var data = [{ name: '阿里', value: .2, color: 'lightgreen'},{name: '百度', value: .4, color: 'red'},{name: '新浪', value: .1, color: 'blue'},{name: '盛大', value: .1, color: '#8E8E38'},{name: '360', value: .2, color: 'purple'}];var his = new Histogram({data: data,x: 1/8 * stage.width(),y: 3/4 * stage.height(),blWidth: 2,blColor: 'lightblue',width: 3/4 * stage.width(),height: 1 * stage.height(),fontSize: 14});his.addToGroupOrLayer(layer);layer.draw();his.playAnimate();layer.on('click',function(){his.playAnimate();}); *///=============>E 柱狀圖=============//=============>S 進度條=============function ProgressBar(option) {this.group = new Konva.Group({x: option.x,y: option.y});this.maxWidth = option.width;this.drawLayer = null;this.init(option); }ProgressBar.prototype = {constructor: ProgressBar,init: function( option ) {var innerRect = new Konva.Rect({x: 0,y: 0,width: 0,height: option.height,fill: option.fillColor,name: 'innerRect',cornerRadius: 1/2 * option.height});this.group.add( innerRect );var outerRect = new Konva.Rect({x: 0,y: 0,width: option.width,height: option.height,strokeWidth: option.strokeWidth,stroke: option.strokeColor,name: 'outerRect',cornerRadius: 1/2 * option.height});this.group.add( outerRect );var drawText = new Konva.Text({text: '努力加載中：0%',x: this.maxWidth / 2 - 14 * 3,y: -outerRect.height(),fontSize: 14,fontStyle: 'bold',fontFamily: '微軟雅黑',align: 'center',name: 'txt'});this.group.add( drawText );},addToLayerOrGroup: function( layer ) {layer.add( this.group );this.drawLayer = layer;},changeValue: function( val ) {if(val > 1) {val /= 100;}var rect = this.group.findOne(".innerRect");// rect.width(this.maxWidth * val);rect.to({duration: .2,width: this.maxWidth * val});var txt = this.group.findOne('.txt');txt.text( '努力加載中：' + Number(val).toFixed(2) * 100 + '%');this.drawLayer.batchDraw();}, pre: function() {var tween = new Konva.Tween({node: this.group,// scaleX: 1.2,// scaleY: 1.2,duration: .5,opacity: .8,onFinish: function() {}});tween.play();} }; /*使用方法：var bgLayer = new Konva.Layer();var progressBar = new ProgressBar({x: stage.width() / 8,y: stage.height() / 2,width: stage.width() * 3/4,height: stage.height() / 20,fillColor: '#cdcd00',strokeColor: '#e0ffff', strokeWidth: 6});progressBar.addToLayerOrGroup(bgLayer);stage.add(bgLayer);bgLayer.batchDraw();progressBar.changeValue(.56);*/ //=============>E 進度條=============//=============>S 加載動畫============= function LoadingAnimate( option ) {this.loadingGroup = null;this.circleArr = [];//初始化動畫組件 this.init( option ); }LoadingAnimate.prototype = {constructor: LoadingAnimate,init: function( option ) {option.radius = option.radius || 30;option.cenX = option.cenX;option.cenY = option.cenY;option.colors = option.colors || ["orange", "lightgreen", "lightblue"];option.duration = option.duration || 1;option.opactiy = option.opacity || .6;option.scaleRange = option.scaleRange || .2;this.loadingGroup = new Konva.Group({x: option.cenX,y: option.cenY});// var colors = ["orange", "lightgreen", "lightblue"];for( var i = 0; i < 3; i++ ) {var tempCircle = new Konva.Circle({x: ( i-1 ) * option.radius * 2,y: 0,fill: colors[i],radius: option.radius });this.loadingGroup.add(tempCircle);this.circleArr[i] = tempCircle;}},//把動畫加載到層中addToLayerOrGroup: function( layer ) {layer.add( this.loadingGroup );},//開始動畫playAnimate: function() {var c1 = this.circleArr[0];var c3 = this.circleArr[2];var _this = this;c1.setZIndex(2);c3.setZIndex(0);c1.to({duration: .8,x: 2 * c1.radius(),y: 0,opacity: .8,scaleY: 1.2,scaleX: 1.2,onFinish : function() {c1.setZIndex(0);c1.to({duration: .8,x: - 2 * c1.radius(),y: 0,opacity: .8,scaleY: 1,scaleX: 1,});}});c3.to({duration: .8,x: - 2 * c3.radius(),y: 0,opacity: .8,scaleY: .8,scaleX: .8,onFinish : function() {c3.setZIndex(2);c3.to({duration: .8,x: 2 * c3.radius(),y: 0,opacity: .8,scaleY: 1,scaleX: 1,onFinish: function() {_this.playAnimate();}});}});} };/*使用方法：var loadingDemo2 = new LoadingAnimate({radius: 40,cenX: 100,cenY: 300,colors: ["orange", "lightgreen", "lightblue"],duration: 1,opacity: .8,scaleRange: .3});loadingDemo2.addToLayerOrGroup(layer);loadingDemo2.playAnimate(); *///=============>E 加載動畫=============//=============>S 餅狀圖============= function PieChart(option) {var _this = this;if( !option ) {throw new Error('請初始化餅狀圖的參數');}this.animageIndex = 0;this.playAnimateCallee = null;this.group = null;this.txtGroup = null;this.animateDuration = .8;this.outerCircle = null;this.data = null;this.init(option);//初始化 }PieChart.prototype = {constructor: PieChart,init: function(option) {//餅狀圖數據：[{name:'',value:.2,color:'red'},...]option.data = option.data || [];//動畫執行的時間option.animateDuration = option.animateDuration || .8;this.animateDuration = option.animateDuration;//動畫執行的效果option.easing = option.easing || Konva.Easings.Linear;//x,y坐標option.x = option.x || 0; option.y = option.y || 0; //餅狀圖半徑option.radius = option.radius === 0 ? 0 : option.radius || 100; option.txtAwayFromWedge = option.txtAwayFromWedge || 20;this.data = option.data;//扇區的組this.group = new Konva.Group({x: option.x,y: option.y});//文字的組this.txtGroup = new Konva.Group({x: option.x,y: option.y});//默認的旋轉角度var tempAngel = -90;//遍歷生成所有扇形的對象for(var i = 0; i < option.data.length; i++ ) {var wedgeAngel = option.data[i].value * 360;var wedge = new Konva.Wedge({x: 0,y: 0,radius: option.radius,fill: option.data[i].color,angle: 0,//后面有計算出角度放到數組中opacity: .6,id: option.data[i].name,name: wedgeAngel + '',rotation: tempAngel,visible: true});this.group.add(wedge);//當前 扇形的對象 和扇形的需要旋轉的角度// arr.push({value: wedge, angle: option.data[i].value * 360});//繪制 文字 //扇形區域的中間var rotationAngle = 0;var totalAngle = tempAngel + 1/2 * wedgeAngel;//設置文字的x坐標var txtX = Math.cos( totalAngle * Math.PI / 180) * (option.radius + option.txtAwayFromWedge);// 設置文字的y坐標var txtY = Math.sin( totalAngle * Math.PI / 180) * (option.radius + option.txtAwayFromWedge);var txtTitle = option.data[i].name +' ' + option.data[i].value * 100 + '%';var txt = new Konva.Text({x: txtX,y: txtY,fill: option.data[i].color,fontSize: '16px',fontFamily: '微軟雅黑',fontStyle: 'bold',align: 'left',id: 'txt_' + option.data[i].name,text: txtTitle,rotation: rotationAngle,visible: false //默認隱藏});this.txtGroup.add(txt);//下面這段代碼是根據 文字的位置設置一下文字的距離原型的位置if( totalAngle > 90 && totalAngle < 270 ) {// rotationAngle = -30;txt.x( txt.x()-txt.getWidth() );}//設置下一個元素旋轉到具體的位置tempAngel += option.data[i].value * 360;}// 繪制外圓this.outerCircle = new Konva.Circle({stroke: '#a0a0a0',strokeWidth: 1,radius: option.radius + 5,x: option.x,y: option.y});},//展示動畫playAnimate: function() {_this = this;if(this.animageIndex >= this.data.length) {_this.animageIndex = 0;return;}//先初始化到0的狀態，然后進行繪制。if(this.animageIndex == 0) {_this.group.getChildren().each(function(value, index){value.angle(0);});_this.txtGroup.getChildren().each(function(value,index){value.hide();});}this.playAnimateCallee= arguments.callee;//當前函數//繪制一個 扇區的動畫var wedge = this.group.getChildren()[this.animageIndex];var angel = Number(wedge.name());//扇區的度數wedge.to({angle: angel,duration: angel * this.animateDuration / 360,onFinish: function() {_this.txtGroup.getChildren()[_this.animageIndex].show();_this.txtGroup.getParent().draw();_this.animageIndex++;_this.playAnimateCallee();//調用當前函數自身，形成動畫隊列。}});},//把當前 餅狀圖添加到 層addToLayer: function(layer) {layer.add(this.group);layer.add(this.txtGroup);layer.add(this.outerCircle);layer.draw();}, };/*用法：//餅狀圖數據var data = [{ name: "前端",value: .25,color: 'lightblue'},{name: "php",value: .2,color: 'orange'},{name: "UI",value: .3,color: 'blue'},{name: "C++",value: .05,color: 'green'},{name: "游戲",value: .1,color: 'purple'},{name: "Java",value: .1,color: 'red'}];//創建餅狀圖var pieChart = new PieChart({data: data,//扇形區域的數據animateDuration: 2,//扇形動畫的時間easing: Konva.Easings.EaseIn,//扇形動畫的速度規格x: cenX,y: cenY,radius: .14 * stage.width(),//半徑txtAwayFromWedge: .2 * .14 * stage.width()//扇形上的文字的距離圓形的距離});pieChart.addToLayer(layer);pieChart.playAnimate();layer.draw();layer.on('click tap', function(){pieChart.playAnimate();}); *///=============E 餅狀圖=============

餅狀圖

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>餅狀圖</title><style>body {padding: 0;margin: 0;background-color: #f0f0f0;overflow: hidden;}</style><script src="./konva.js"></script><script src="./KonvaExtend.js"></script> </head> <body><div id="container"></div><script>//創建舞臺var stage = new Konva.Stage({container: 'container',width: window.innerWidth,//全屏height: window.innerHeight});//創建層var layer = new Konva.Layer();stage.add(layer);//中心點坐標var cenX = stage.width() / 2;var cenY = stage.height() / 2;//創建加載層動畫//餅狀圖數據var data = data = [{name:"apple", value:0.24, color:"pink"},{name:"三星", value:0.26, color:"skyblue"},{name:"華為", value:0.13, color:"orange"},{name:"錘子", value:0.17, color:"#333"},{name:"小米", value:0.08, color:"purple"},{name:"其他", value:0.12, color:"cyan"}];//創建餅狀圖var maxSize = stage.width() > stage.height() ? stage.height() : stage.width();var pieChart = new PieChart({data: data,//扇形區域的數據animateDuration: 2,//扇形動畫的時間easing: Konva.Easings.EaseIn,//扇形動畫的速度規格x: cenX,y: cenY,radius: .3 * maxSize,//半徑txtAwayFromWedge: .3 * .3 * maxSize//扇形上的文字的距離圓形的距離});pieChart.addToLayer(layer);pieChart.playAnimate();layer.draw();layer.on('click tap', function(){pieChart.playAnimate();});</script> </body> </html>

柱狀圖

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>柱狀圖</title><style>body {padding: 0;margin: 0;background-color: #f0f0f0;overflow: hidden;}</style><script src="./konva.js"></script><script src="./KonvaExtend.js" charset="utf-8"></script> </head> <body><div id="container"></div><script>var stage = new Konva.Stage({container: 'container',width: window.innerWidth,height: window.innerHeight});var layer = new Konva.Layer();stage.add(layer);var cenX = stage.width() / 2;var cenY = stage.height() / 2;var data = [{ name: '百度', value: 2, color: 'blue' },{ name: '阿里', value: 4, color: 'red' },{ name: '新浪', value: 1, color: 'purple' },{ name: '搜狐', value: 1, color: 'navy' },{ name: '兄弟連', value: 2, color: 'orange' }];var his = new Histogram({data: data,x: 1/8 * stage.width(),y: 3/4 * stage.height(),blWidth: 2,blColor: 'lightblue',width: 3/4 * stage.width(),height: 1/3 * stage.height(),fontSize: 14});his.addToGroupOrLayer(layer);layer.draw();his.playAnimate();layer.on('click',function(){his.playAnimate();});</script> </body> </html>

轉載于:https://www.cnblogs.com/DCL1314/p/7886427.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的封装构造函数，用canvas写饼状图和柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。

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