canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

绘制图表教程
最新推荐文章于 2025-07-27 13:22:04 发布
转载 最新推荐文章于 2025-07-27 13:22:04 发布 · 425 阅读 · 5 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/DCL1314/p/7872628.html

本文详细介绍了如何使用HTML5的canvas元素绘制饼状图、折线图和柱状图的方法，并提供了Konva.js库制作动态饼状图的具体实现。

制作饼状图

1201653-20171119153853937-458753266.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制扇形图</title>
<style>
    body{
        background:#ccc;
    }
    canvas{
        background:#fff;
    }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
    (function(){
        //定义数据
        var data = [
            {title:"apple", value:0.24, color:"green"},
            {title:"三星", value:0.26, color:"yellow"},
            {title:"华为", value:0.13, color:"orange"},
            {title:"锤子", value:0.17, color:"red"},
            {title:"小米", value:0.08, color:"purple"},
            {title:"其他", value:0.12, color:"cyan"}
        ];

        var w=800;
        var h=600;
        var cx=w/2;
        var cy=h/2;
        var r=200;

        //获取canvas元素
        var canvas=document.getElementById("myCanvas");

        //设置画布宽高
        canvas.width=w;
        canvas.height=h;

        //获取绘图环境
        var ctx=canvas.getContext("2d");
        ctx.font="18px Micorsoft YaHei";
        //遍历数据
        var beginAngle=Math.PI/6; //开始的点
        data.forEach(function(item){
            //弧度范围
            var angle=item.value*2*Math.PI;
            //结束的点
            var endAngle=beginAngle+angle;

            //绘制扇形区域
            ctx.beginPath();
            ctx.moveTo(cx,cy);
            ctx.arc(cx,cy,r,beginAngle,endAngle);
            ctx.fillStyle=item.color;
            ctx.fill();

            //写字
            var txtAngle=beginAngle+angle/2;
            if(txtAngle>=Math.PI/2 && txtAngle<Math.PI*3/2){
                ctx.textAlign="end";
            }else{
                ctx.textAlign="start";
            }

            var tx=cx+(r+10)*Math.cos(txtAngle);//Math.cos(x)    x 的余弦值。返回的是 -1.0 到 1.0 之间的数；
            var ty=cy+(r+10)*Math.sin(txtAngle);//Math.sin(x)      x 的正玄值。返回值在 -1.0 到 1.0 之间；
            ctx.fillText(item.title+" "+item.value*100+"%",tx,ty);

            beginAngle=endAngle;
        })

    })()
</script>
</body>
</html>

Konva制作动态饼状图

1201653-20171122210301071-1228034837.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扇形图</title>
    <style>
        body{
            background:#ccc;
        }
        .konvajs-content{
            background:#fff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="konva.js"></script>
    <script>
        var radius=150;
        var duration=1;
        var data = [
            {title:"apple", value:0.24, color:"pink"},
            {title:"三星", value:0.26, color:"skyblue"},
            {title:"华为", value:0.13, color:"orange"},
            {title:"锤子", value:0.17, color:"red"},
            {title:"小米", value:0.08, color:"purple"},
            {title:"其他", value:0.12, color:"cyan"}
        ];

        //创建舞台
        var stage=new Konva.Stage({
            container:"#box",
            width:800,
            height:600
        })
        //创建层
        var layer=new Konva.Layer({

        });
        stage.add(layer);
        //创建扇形的组
        var wedgeGroup=new Konva.Group({
            x:stage.getWidth()/2,
            y:stage.getHeight()/2
        });

        //创建文字的组
        var textGroup=new Konva.Group({
            x:stage.getWidth()/2,
            y:stage.getHeight()/2
        })

        var startAngle=0;
        data.forEach(function(item,index){
            var angle=item.value*360;
            //绘制扇形
            var wedgeShape=new Konva.Wedge({
                x:0,
                y:0,
                radius:radius,
                angle:0,
                rotation:startAngle,
                fill:item.color,
                name:angle+""
            });
            wedgeGroup.add(wedgeShape);

            //绘制文字
            var textAngle=startAngle+angle/2;//文字对应的角度
            var textX=Math.cos(textAngle/180*Math.PI)*(radius+30);
            var textY=Math.sin(textAngle/180*Math.PI)*(radius+30);

            var text=new Konva.Text({
                text:item.title,
                x:textX,
                y:textY,
                fill:item.color,
                fontSize:12,
                visible:false
            });

            if(textAngle>90&&textAngle<270){
                text.x(text.x()-text.getWidth())
            }
            textGroup.add(text);
            startAngle+=angle;
        });

        //绘制外圆
        var outerCircle=new Konva.Circle({
            x:stage.getWidth()/2,
            y:stage.getHeight()/2,
            radius:radius+5,
            stroke:"#ccc",
            strokeWidth:1
        });
        layer.add(wedgeGroup);
        layer.add(textGroup);
        layer.add(outerCircle);

        layer.draw();

        //设置动画来让扇形动起来
        var wedgeList=wedgeGroup.getChildren();
        var animateIndex=0;

        playAnimate();//调用函数执行动画
        function playAnimate(){
            if(animateIndex>=data.length){
                return;
            }
            var wedge=wedgeList[animateIndex];
            var angle=Number(wedge.name());
            var animateDuration=duration*(angle/360);
            wedge.to({
                angle:angle,
                duration:animateDuration,
                onFinish:function(){
                    textGroup.getChildren()[animateIndex].show();
                    animateIndex++;
                    playAnimate();
                }
            })
        }
    </script>
</body>
</html>

制作折线图

1201653-20171121105818055-472819178.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <style>
        body{
            background:#ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        //定义相关数据 最大100
        var data=[
            {year:"2008",value:40},
            {year:"2009", value:48},
            {year:"2010", value:50},
            {year:"2011", value:70},
            {year:"2012", value:60},
            {year:"2013", value:40},
            {year:"2014", value:20},
            {year:"2015", value:60},
            {year:"2016", value:80},
            {year:"2017", value:90}
        ];
        var xWidth=40;//x轴每一个格子宽度
        var yWidth=40;//y轴每一个格子宽度
        var x=100,y=500;//原点坐标
        var len=data.length;//数据长度
        //获取canvas元素
        var canvas=document.querySelector("#myCanvas");
        canvas.width=800;
        canvas.height=600;
        canvas.style.border="1px solid #ccc";
        canvas.style.backgroundColor="#fff";
        //获取绘图环境
        var ctx=canvas.getContext("2d");

        //绘制坐标系
        ctx.beginPath();
        //x轴
        var xLength=xWidth*(len+1);//x轴长度
        ctx.moveTo(x,y);
        ctx.lineTo(x+xLength,y);//箭头
        ctx.lineTo(x+xLength-10,y-10);//上箭头
        ctx.moveTo(x+xLength,y);//下箭头
        ctx.lineTo(x+xLength-10,y+10);//下箭头
        //刻度
        ctx.textAlign="center";
        ctx.textBaseline="top";
        for(var i=1;i<=len;i++){
            ctx.moveTo(x+xWidth*i,y);
            ctx.lineTo(x+xWidth*i,y-10);
            ctx.fillText(data[i-1].year,x+xWidth*i,y);
        }

        //y轴
        var yLength=yWidth*(len+1);
        ctx.moveTo(x,y);
        ctx.lineTo(x,y-yLength);
        //箭头
        ctx.lineTo(x-10,y-yLength+10);//左箭头
        ctx.moveTo(x,y-yLength);//右箭头
        ctx.lineTo(x+10,y-yLength+10);//右箭头
        //刻度
        ctx.textAlign="end";
        ctx.textBaseline="middle";
        for(var i=0;i<=10;i++){
            ctx.moveTo(x,y-i*yWidth);
            ctx.lineTo(x+10,y-i*yWidth);

            ctx.fillText(i*10,x-5,y-i*yWidth)
        }
        ctx.strokeStyle="orange";
        ctx.stroke();

        //绘制折线图
        ctx.beginPath();
        data.forEach(function(item,index){
            ctx.lineTo(x+(index+1)*xWidth,y-item.value/10*yWidth);
        });
        ctx.strokeStyle="purple";
        ctx.stroke();
    </script>
</body>
</html>

制作柱形图

1201653-20171121123221633-1539159974.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱形图</title>
    <style>
        body{
            background:#ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        //定义相关数据 最大100
        var data=[
            {city:"北京",number:345,color:"red"},
            {city:"上海", number:645, color:"green"},
            {city:"广州", number:545, color:"#369"},
            {city:"深圳", number:945, color:"purple"}
        ];
        var x=100,y=500;//原点坐标
        var xWidth=50;
        var yWidth=40;

        //获取canvas元素
        var canvas=document.querySelector("#myCanvas");
        canvas.width=800;
        canvas.height=600;
        canvas.style.border="1px solid #ccc";
        canvas.style.backgroundColor="#fff";

        //获取绘图环境
        var ctx=canvas.getContext("2d");

        //绘制坐标 轴
        ctx.save();
        ctx.translate(x,y);
        ctx.beginPath();

        //x轴
        ctx.moveTo(0,0);
        ctx.lineTo(xWidth*9,0);
        ctx.lineTo(xWidth*9-10,-10);
        ctx.moveTo(xWidth*9,0);
        ctx.lineTo(xWidth*9-10,10);

        //y轴
        ctx.moveTo(0,0);
        ctx.lineTo(0,-yWidth*11);
        ctx.lineTo(-10,-yWidth*11+10);
        ctx.moveTo(0,-yWidth*11);
        ctx.lineTo(10,-yWidth*11+10);

        //刻度
        ctx.textAlign="end";
        ctx.textBaseline="middle";
        for(var i=0;i<=10;i++){
            ctx.moveTo(0,-i*yWidth);
            ctx.lineTo(10,-i*yWidth);
            ctx.fillText(i*100,-10,-i*yWidth);
        }
        ctx.strokeStyle="orange";
        ctx.stroke();

        //绘制饼状图
        ctx.beginPath();
        ctx.textAlign="center";
        ctx.textBaseline="top";
        data.forEach(function(item,index){
            ctx.fillStyle=item.color;
            ctx.fillRect(index*2*xWidth+xWidth,-item.number/100*yWidth,xWidth,item.number/100*yWidth);
            ctx.fillText(item.city,index*2*xWidth+xWidth+xWidth/2,10);
        })
    
        ctx.restore();
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/DCL1314/p/7872628.html

Canvas之画折线和柱状图
LuochuanAD的博客
06-14 1075
一,说明 使用HTML画折线和柱状图,效果图如下: 二,代码片段(该完整代码地址在文章的最后面) var a_canvas; var a_context; var b_canvas; var b_context; window.onload = function() { a_canvas = document.getElementBy
前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】
xachary的博客
06-08 929
这一章把直线连接改为折线连接，沿用原来连接点的关系信息。关于折线的计算，使用的是开源的 AStar 算法进行路径规划，启发方式为 曼哈顿距离，且不允许对角线移动。
网页，html5,canvas，js 动态绘制柱形图
05-31
网页，html5,canvas，js 动态绘制柱形图
Konva库深度应用：从基础到面向对象的Canvas绘图教程
最新发布
weixin_35753431的博客
07-27 984
Konva 是一个专为 HTML5 Canvas 设计的 JavaScript 库，它提供了丰富的形状、交互和动画功能，以便开发者可以构建高性能的图形界面和可视化应用。作为Web开发者的工具箱中的一个强力工具，Konva使得在浏览器中处理图形和动画变得轻而易举。在Konva中绘制圆形和椭圆形涉及到对Konva Circle类和Ellipse类的使用。圆形可以看作是特殊情况下椭圆的特例。首先，创建圆形的基本步骤包括：初始化舞台和图层，确保有合适的画布环境。
canvas--折线图
qq_42309685的博客
08-25 792
canvas–折线图 功能：模拟从后台获取数据，将得到的数据在画布上连接成一个折线图，即数据可视化 效果如下： 绘制这个图主要包含以下几个部分： 新建一个构造函数LineChart() 传递数据data 初始化函数的行为和方法（主要包含绘制网格，绘制坐标系，绘制点和连接点） 代码如下: <canvas width="600px" height="400px"></canva...
【Konva入门教程】2、Konva-图形
yijingjie的博客
07-15 390
视频教程：【Konva入门教程】2、Konva-图形 这个视频中介绍了Konva图形的使用。
ArkUI 图表绘制：用 Canvas 实现折线图 / 柱状图 HarmonyOS 5.0.0
2501_92048894的博客
05-13 511
数据可视化是应用 UI 表达力的重要一环。不管是财务报表、健康趋势、考试得分分析，还是销售增长曲线，一个可视化的图表能让用户。在鸿蒙 ArkTS 中，你可以使用在Canvas组件中绘制图形，实现。今天我们将从零开始，绘制一个与组件。
Canvas统计图插件开发：柱形图与折线图实战
"本文将介绍如何使用JavaScript封装一个Canvas统计图插件，通过自定义属性绘制柱形图、折线图，并提供了动画效果和多种可配置选项。" 在JavaScript开发中，封装是一种重要的编程技巧，它能提高代码的重用性和可维护...
柱形图与折线图代码示例解析
在数据分析和可视化领域，柱形图和折线图是最常用的数据表示方式之一。它们各有特点，柱形图适合展示不同类别数据的大小比较，而折线图适合显示数据随时间或顺序变化的趋势。结合使用柱形图和折线图可以同时展示这两...
Android利用View绘制饼状图，折线图，柱状图等
09-18
在Android开发中，为了展示数据或者进行可视化交互，我们经常需要使用各种图表，如饼状图、柱状图和折线图。这些图表可以帮助用户直观地理解复杂的数据信息。本篇将详细介绍如何在Android中利用自定义View来实现这三...
柱状图多维条形图vue_Vue组件（1）使用Echarts绘制图表-柱状图/折线图
weixin_39976251的博客
12-18 826
前言​ 最近工作中需要做一个自动配置报表的功能，需求目的是可以通过配置来适应产品对于报表需求的变更，不用重复更改代码。配置实现流程如下：配置报表所需的数据源选择筛选报表数据的参数生成报表页面生成展示页面(生成的报表通过选择放入展示页面)项目是通过前后端分离实现的，前端框架是Vue,配合Echart绘制相关图表，因为我也是第一次尝试写前端组件，所以这里写下文章记录下。特别提示：这里的组件不是通过...
基于Konva的canvas动态绘图(2)
09-23
基于Konva的canvas动态绘图，用到了面向对象的思想,实现了一个在网页加载时，扇形圆动态开启的动画下效果
HighSpeedChart动态绘图
03-01
利用开源工具HighSpeedChart在MFC中绘制动态的折线图和条形图，涉及文件的读取，字符串的截取等等
canvas实现圆饼图,柱状图,折线图(满满的干货)
qq_45378970的博客
10-07 912
canvas画图圆饼图柱状图折线图 圆饼图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #a1{ border: 1px solid red; } </style> </head> <body> &lt
konva系列教程4：图形属性
fe_watermelon的博客
06-28 1296
大家好，我是前端西瓜哥，我们今天来看看图形的一些常见属性。 x 和 y 代表的是图形的 位置，对于矩形来说，是左上角。对于圆形、圆环这些来说，则是在圆心处。这个位置也是图形进行变形的参考点，或者说是旋转时的中心。offsetX 和 offsetY 可以改变图形的位置。offset 其实是将画布坐标系的原点移动一定距离，再绘制图形。比如对矩形，我们将 offsetX 和 offsetY 设置为 width/2 和 height/2，我们就能让矩形的位置跑到矩形的中点。width 和 height 为图形的宽高
可视化需求实现，react中echarts与konva结合，部分示例供参考（饼图，柱状图，地图下钻）
qq_53199450的博客
04-02 465
已经预留出了大部分可以替换的图片，第一张图的图片没有给出，请自行替换第二张图的图片。
javascript写字技巧_js canvas实现写字动画效果
weixin_39609622的博客
12-29 933
本文实例为大家分享了js canvas实现写字动画效果展示的具体代码，供大家参考，具体内容如下页面html：学写一个字content=" height = device-height,width = device-width,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no"/> //...
android+字体+动画效果怎么做的,字体动画效果怎么做？原来这么简单！
weixin_32823659的博客
05-26 808
原标题：字体动画效果怎么做？原来这么简单！平常喜欢看视频的朋友一定有留意到，视频中的字幕，一般会带上各种各样的动态效果，而不是简单的出现、停留和消失。那么，丰富多彩的字体动画效果是怎么实现的呢？下面就一起来看看吧！ 先来了解一下添加字幕并制作字体动画效果的基础操作。一、给视频添加字幕在主界面点击“字幕特效”选项卡，在预览框时间进度条上，定位到要添加字幕的时间点，然后双击预览窗口中任意位置，在弹出的...
canvas2D 基础知识 浅析
03-20 243
1.canvas HTML5给出的一个可以展示绘图内容的标签 使用领域： (推荐网站：threejs.org) 1. 游戏 2. 可视化数据 3. Banner广告 4. 多媒体 （1）在 canvas 中使用各种方法描点实际上描述的是一个称为路径( path )的东西 （2）在 canvas 绘图中，所有描述的东西都是路径，只有最后填充或描边的时候才会显示出效果 （...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值