柱状图案例

来源：互联网发布：js 清除cookie 编辑：程序博客网时间：2024/05/21 07:04
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-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></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:'teal'},    ];    //x:从1/8*x,3/4    //y:3/4高度    var x0 = (1/8)*stage.width();        //柱状图原点坐标    var y0 = 3/4*stage.height();       //    var width = 3/4*stage.width();     //柱状图最大宽度    var height = 1/2*stage.height();   //    //绘制底线    var bsLine = new Konva.Line({        points:[x0,y0,x0+width,y0],        strokeWidth:1,        stroke:'lightgreen',    });    //把矩形添加到层    layer.add(bsLine);    //定义 矩形和矩形两边的边距的宽度    var rectWidth = width / data.length;    //绘制柱状图的矩形：遍历每一条数据然后生成一个矩形    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        });        layer.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'        });        layer.add(text);        var group = new Konva.Group({            x:x0 + (1/2+index)*rectWidth,            y:y0,        });        //把文字放到柱状图的底部        var textBottom = new Konva.Text({            x:0,            y:0,            fontSize:14,            text:item.name,            fill:item.color,            rotation:30,        });        group.add(textBottom);        layer.add(group);    });    //把层渲染到舞台上    layer.draw();    //做一个动画    //点击任何舞台区域的时候会触发下面的事件    stage.on('contentClick',function(){        //让柱状图进行动画展示        //让柱状图中的所有矩形高度全为0，y->y0        //拿到所有矩形        layer.find('Rect').each(function(item,index){            item.y(y0);//在Konva中如果传参，代表设置值，如果不传参数，代表取值            item.height(0);            //动画显示到初始状态            item.to({                duration:1,                y:y0-data[index].value*height,                height:data[index].value*height,            });        });        //把文字设置一下动画        layer.find('.textPercent').each(function(item,index){            item.y(y0-14);            item.to({                duration:1,                y:y0-data[index].value*height-14,            });        });         });    </script></body></html>
这里写图片描述
0 0