柱状图案例

最新推荐文章于 2025-04-17 13:39:05 发布

python基础教程

最新推荐文章于 2025-04-17 13:39:05 发布

阅读量1.5k

点赞数

分类专栏： 07canvas

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

版权

07canvas 专栏收录该内容

12 篇文章

订阅专栏

本文将介绍如何利用Python的matplotlib库创建柱状图。我们将探讨数据准备、设置图表属性和绘制不同类型的柱状图，包括单列和多列柱状图。通过实例，你将学会如何定制颜色、标签和图例，提升数据可视化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

这里写图片描述