柱状图面向对象版本

最新推荐文章于 2022-06-24 23:03:55 发布

python基础教程

最新推荐文章于 2022-06-24 23:03:55 发布

阅读量306

点赞数

分类专栏： 07canvas

本文链接：https://blog.csdn.net/stopcpp/article/details/53571704

版权

07canvas 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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
            });
        });
    }
}

python基础教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
柱状图面向对象版本

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
复制链接

扫一扫

专栏目录