canvas动态绘制折线图

公司的实践课题vue项目，用折线图展示近六个月的收入和支出，以前看到图表，第一个想到的就是从echarts官网调用，但这次导师建议我们用canvas去画，然后去封装，这样可以加大课题难度，同时理解底层的东西。

demo运行效果如图所示：

先分析折线图

主要包括画线、画圆、绘制文字三部分,分别使用canvas提供的以下方法

画线：moveTo() lineTo()

画圆：arc()

绘制文字：fillText()

绘制坐标系

  // 绘制坐标系drawAxis () {let ctx = this.ctx,w = this.w,xlength = this.xlength,     //x轴刻度数xl = this.xl,               // x轴起始位置xs = this.xs;               // x轴每个单位长度// 画x轴ctx.moveTo(0, this.lineHeight);ctx.lineTo(w, this.lineHeight);ctx.strokeStyle = '#C0C0C0';ctx.stroke();// 画y轴for (let i = 0; i < xlength; i++) {ctx.beginPath();ctx.moveTo(i * xs + xl, this.paddingTop);ctx.lineTo(i * xs + xl, this.lineHeight);ctx.strokeStyle = '#C0C0C0';ctx.stroke();// 底部月份ctx.textAlign = 'center';ctx.font = '30px Arial';ctx.fillText(this.xAxis.data[i]+'月', i * xs + xl, this.lineHeight + 20 * this.proportion * 2);ctx.textBaseline = 'end';ctx.fillStyle = '#333333';}}

动画绘制

动态绘制实质就是每次画一小段，可以用setTimeOut（）、setInterval（）设置，这里用到了window.requestAnimationFrame（），告诉浏览器,你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画,这个方法的优点在于不会出现动画卡顿的情况。

// 执行动画animate (posData, rate, flag) {let that = this,ctx = this.ctx,x0 = posData[0].xPos, //第一个x坐标y0 = posData[0].yPos, //第一个y坐标speed = 7,     //绘制速度i = 0,posText = [];posText = this.textPos(posData, flag);  //匹配不同折线金额格式和金额坐标(function run () {ctx.lineWidth = 5;ctx.beginPath();if (Math.abs(x0 - posData[i + 1].xPos) <= speed) {i++;}if (Math.abs(x0 - posData[i].xPos) <= speed) {y0 = posData[i].yPos + 14 * that.proportion * Math.sin(Math.atan(rate[i]));x0 = posData[i].xPos + parseInt(14 * that.proportion * Math.cos(Math.atan(rate[i])));ctx.arc(posData[i].xPos, posData[i].yPos, 14 * that.proportion, 0, 2 * Math.PI);// 不为0的情况if (parseInt(that.series[flag].data[i]) > 0) {// 填充ctx.fillStyle = that.series[flag].color1;ctx.fill();// 描边ctx.strokeStyle = that.series[flag].color2;ctx.stroke();ctx.closePath();// 绘制金额ctx.beginPath();ctx.textAlign = 'center';ctx.font = '28px Arial';ctx.fillStyle = that.series[flag].color2;ctx.fillText(posText[i].mText,posData[i].xPos,posText[i].tpos);}// 金额为0的情况else {ctx.fillStyle = '#f2f2f2';ctx.fill();// 描边ctx.strokeStyle = '#999999';ctx.stroke();ctx.closePath();ctx.beginPath();ctx.textAlign = 'center';ctx.font = '28px Arial';ctx.fillStyle = '#666666';// 若收入支出金额都为0，只显示一个0.00ctx.fillText(that.series[flag].data[i],posData[i].xPos,posData[i].yPos + 38 * that.proportion * 2);}}ctx.moveTo(x0, y0);ctx.lineTo((x0 += speed), (y0 += speed * rate[i]));// 判断下一个点是否为0，若为0，折线颜色为灰色ctx.strokeStyle = parseInt(that.series[flag].data[i + 1]) === 0 ? '#999999' : that.series[flag].color2;ctx.stroke();ctx.closePath();//在画完最后一个点前，一直运行run函数进行绘制if (x0 <= posData[posData.length - 1].xPos) {window.requestAnimationFrame(run);       }})();}

绘制过程封装在一个js文件中，前端调用过程如下

//折线图setLineChart (outArray, inArray, monthArray) {let con = document.getElementById('lineChart');let line = new Line(con);line.init({w: 622,h: 324,xAxis: {data: monthArray},series: [{name: '支出',data: outArray,color1: '#003366',color2: '#003366'},{name: '收入',data: inArray,color1: '#8B0000',color2: '#8B0000'}]});}

mounted:{this.setLineChart(this.outArray,this.inArray,this.monthArray);
}

不足之处：封装的不是很好，如果series中再添加一个的话，底层封装的地方也需要改动，造成代码效率低。

源代码下载链接：https://download.csdn.net/download/qq_36135258/11467393

canvas动态绘制折线图相关推荐

微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&q ...
canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
带着canvas去流浪系列之二绘制折线图
[摘要] 用canvasAPI实现echarts简易图表示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明使用原生canvasAPI绘制 ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
gd动态曲线 php_php中用GD绘制折线图
1 ClassChart{2 private $image; //定义图像 3 private $title; //定义标题 4 private $ydata; //定义Y轴数据 5 private ...
python matplotlib绘制折线图
前言众所周知,matplotlib 是一款功能强大开源的数据可视化模块,凭借着强大的扩展性构建出更高级别的绘图工具接口如seaborn.ggplot.我们来看看往期学习章节内容概述吧~ 接下来,我们 ...
python绘制折线图先对数据进行处理_python气象数据分析并绘制折线图-女性时尚流行美容健康娱乐mv-ida网...
女性时尚流行美容健康娱乐mv-ida网 mvida时尚娱乐网首页美容护肤化妆技巧发型服饰健康情感美体美食娱乐明星八卦首页 > 高级搜索 excel 2010巧妙处理折 ...
d3js绘制y坐标轴_使用D3.js 绘制折线图
在一个网站上绘制折线图使用了ant/g2,打包后的体积到了一兆多,这不行了,需要按需加载.但是它的支持不太友好,我尝试在官网上用它的方法来按需引入,不是缺这就是缺那,很不好用. 反正我这里只是画个折线 ...

canvas动态绘制折线图

先分析折线图

绘制坐标系

动画绘制

canvas动态绘制折线图相关推荐

最新文章

热门文章