canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
2024-06-30 07:31:06
制作饼状图
<!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制作动态饼状图
<!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>制作折线图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>折线图</title><style>body{background:#ccc;}</style>
</head>
<body><canvas id="myCanvas"></canvas><script>//定义相关数据 最大100var 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>制作柱形图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>柱形图</title><style>body{background:#ccc;}</style>
</head>
<body><canvas id="myCanvas"></canvas><script>//定义相关数据 最大100var 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制作柱形图/折线图/饼状图，Konva写动态饼状图相关推荐
- Plotly.js使用详细介绍（折线图、饼状图、点图、水平条形图、桑基图、树状图、等值线图）
目录 0 写在前面 1 HTML代码 2 折线图 2.1 基本折线图 2.2 复杂折线图 2.2.1 轨迹 2.2.2 布局 3 饼状图 3.1 基本饼状图 3.2 饼图子图 3.3 甜甜圈图 4 点 ...
- Echarts动态饼状图，柱形图，关系图绘制
1 饼状图代码(动态) //echarts图var chrNumber =[];var chrnum=[];for (var i=0;i<data.chrNum.length;i++){//通过 ...
- 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果 引入js文件: <script type=&q ...
- 利用highchart实现动态饼状图
利用highchart实现动态饼状图 引言 highchart 动态饼状图 直接上代码 代码说明 效果图 引言 一直习惯于用highchart.js完成数据可视化页面的制作,做了很多图表都没有真正的整 ...
- echarts柱形图+折线图混合案例
效果图 vue柱形图+折线图组件 <template><div ref="two"></div> </template> <s ...
- d3.js v5 饼状图（加载动画、悬浮动画、图注以及悬浮提示框）
实现的效果大概是这样: 实现代码如下: <html><body></body><style>div{background: #F2F4FF;width: ...
- Echarts柱形图折线图合并demo（含图例）
文章目录 前言 前言 柱形图折线图合并demo(含图例) option = {xAxis: {type: 'category',data: [2001, 2002, 2003, 2004, 2005] ...
- Java使用POI生成饼状图导出到word文档（饼状图）
本篇文章主要介绍,如何使用Apache POI组件生成饼状图导出到word文档中,具体步骤看下文. 一.实现效果 Java使用POI技术生成饼状图导出到word文档中,最终生成的饼状图如下所示: 二. ...
- vue中使用echarts绘柱形图+折线图
一.完成后效果图 二..vue文件完整代码 <template><!-- 柱形图+折线图多个展示 --><divid="myMaxbar":style ...
最新文章
- usaco street race（dfs）
- Design Pattern - Adapter（C#）
- Mysql数据库表内外键关联的问题
- PAT_B_1006 换个格式输出整数
- jQuery10种不同动画效果的响应式全屏遮罩层
- python比较两个数据库表_mysql如何比对两个数据库表结构的方法
- python解析dom,关于Python解析xml dom的简单应用
- Atitit.每周计划日程表 流程表 v9 r829.docx
- 移动wifi宝显示无服务器,优游宝4G随身WiFi解决方案 云SIM技术无需插卡
- filepath直接指定到文件名吗_按照txt中指定的文件名，从src_path中拷贝文件到dest_path(copyfile_from_txt)...
- windows环境下，搭建RTSP视频推流服务器
- python编辑数学公式_最好用的文字与公式编辑器，这套数学笔记神器送给你
- linux——20线程池
- ntp服务restrict_Linux配置ntp时间服务器（全）
- 从softmax到ArcFace
- Spark项目模拟——航班飞行网图分析
- Oracle查询表名注释及表字段注释
- 泰山OFFICE技术讲座：标点关系穷举研究-05
- 属于超级APP的时代过去了？
- 21西南交通大学计算机专硕成功上岸