柱状图面向对象版本

来源：互联网发布：阶层的算法用c语言编辑：程序博客网时间：2024/04/29 19:50

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>柱状图面向对象版本</title>    <style>        body {            padding: 0;            margin: 0;            background-color: #f0f0f0;            overflow: hidden;        }    </style>    <script src="lib/js/konva/konva.js"></script>    <script src="HistogramChart.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 = [        {name:'前端',value:'.8',color:'green'},        {name:'PHP',value:'.3',color:'blue'},        {name:'JAVA',value:'.7',color:'red'},        {name:'UI',value:'.9',color:'orange'},        {name:'IOS',value:'.4',color:'purple'},        {name:'Android',value:'.9',color:'pink'},    ];    var h  = new HistogramChart({        x:1/8*stage.width(),        y:3/4*stage.height(),        w:3/4*stage.width(),        h:1/2*stage.height(),        data:data,    });    h.addToGroupOrLayer(layer);    layer.draw();    stage.on('contentClick',function(){        h.playAnimate();    });    </script></body></html>

HistogramChart.js

'use strict';//histogram:柱状图function HistogramChart( option ){    this._init( option );}HistogramChart.prototype = {    _init:function( option ){        this.x = option.x || 0;        this.y = option.y || 0;        this.w = option.w || 0;        this.h = option.h || 0;        this.data = option.data || [];        var x0 = 0;        var y0 = 0;        //柱状图中的所有元素的组        this.group = new Konva.Group({            x:this.x,            y:this.y,        });        //放矩形的组        this.rectGroup = new Konva.Group({            x:0,            y:0,        });        this.group.add(this.rectGroup);        //放百分比文字的组        this.textPercentGroup = new Konva.Group({            x:0,            y:0,        });        this.group.add(this.textPercentGroup);        //初始化底线        var bsLine = new Konva.Line({            points:[x0,y0,this.w,y0],//要求底线按照画布左上角定位            strokeWidth:1,            stroke:'lightgreen',        });        this.group.add(bsLine);        var rectWidth = this.w / this.data.length;        var height = this.h;        var self = this;//当前柱状图的对象        //初始化 矩形        //初始化文字%        //初始化底部文字        this.data.forEach(function(item,index){            var rect = new Konva.Rect({                x: x0 + (1/4+index)*rectWidth,                y: y0 - item.value*height,                width:1/2*rectWidth,                height:item.value*height,                fill:item.color,                opacity:.8,                cornerRadius:10            });            self.rectGroup.add(rect);            //把百分比的文字放到柱状图的顶部            var text = new Konva.Text({                x:x0+index*rectWidth,                y:y0-item.value*height-14,                fontSize:14,                text:item.value*100+'%',                width:rectWidth,                align:'center',                fill:item.color,                name:'textPercent',            });            self.textPercentGroup.add(text);            var group = new Konva.Group({                x:x0 + (1/2+index)*rectWidth,                y:y0,            });            //把文字放到柱状图的底部            var textBottom = new Konva.Text({                x:x0+(1/2+index)*rectWidth,                y:0,                fontSize:14,                text:item.name,                fill:item.color,                rotation:30,            });            self.group.add(textBottom);            // layer.add(group);            });    },    addToGroupOrLayer : function(arg){        arg.add(this.group);    },    playAnimate : function(){        var self = this;        //让柱状图清零 y->y0 h:0        this.rectGroup.getChildren().each(function(item,index){            item.y(0);            item.height(0);            //经过一个动画还原            item.to({                duration:1,                y:-self.data[index].value*self.h,                height:self.data[index].value*self.h,            });        });        //让文字有个动画        this.textPercentGroup.getChildren().each(function(item,index){            item.y(-14);            item.to({                duration:1,                y:-self.data[index].value*self.h -14            });        });    }}

0 0