canvas–折线图

功能：模拟从后台获取数据，将得到的数据在画布上连接成一个折线图，即数据可视化
效果如下：

绘制这个图主要包含以下几个部分：

新建一个构造函数LineChart()
传递数据data
初始化函数的行为和方法（主要包含绘制网格，绘制坐标系，绘制点和连接点）
代码如下:

<canvas width="600px" height="400px"></canvas><script>//需求：利用面向对象的方法和canvas将一组数据制作成一幅折线图//模拟从后台获取数据var data = [{x:100,y:120},{x:200,y:160},{x:300,y:240},{x:400,y:320},{x:500,y:80}]//构造函数var LineChart = function(ctx) {// 获取绘图工具箱this.ctx = document.querySelector("canvas").getContext("2d");console.log(this.ctx);// 获取画布的长度和宽度this.cWidth = this.ctx.canvas.width;this.cHeight = this.ctx.canvas.height;// 设置坐标系的外边距this.space = 20;// 设置坐标系网格的大小this.grid = 10;//设置坐标系箭头的大小this.arrowSize = 10;//设置数据点的大小this.dottedSize = 6;//设置原点的坐标this.x0 = this.space;this.y0 = this.cHeight-this.space;};//传递data数据,LineChart.prototype.init = function(data) {//传递数据之前先绘制网格和坐标系this.drawGrid();this.drawAxis();//将数据传递给绘制点的方法进行绘制this.drawDotted(data);};//绘制网格 LineChart.prototype.drawGrid = function(){// 先绘制X方向的线条var xLineTotal = Math.floor(this.cHeight/this.grid);this.ctx.strokeStyle = "#eee";for(var i=0; i<=xLineTotal;i++){this.ctx.beginPath();this.ctx.moveTo(0,i*this.grid-0.5);this.ctx.lineTo(this.cWidth,i*this.grid-0.5);this.ctx.stroke();}// 绘制y方向的线条var yLineTotal = Math.floor(this.cWidth/this.grid);for(var j=0; j<=yLineTotal; j++){this.ctx.beginPath();this.ctx.moveTo(j*this.grid-0.5,0);this.ctx.lineTo(j*this.grid-0.5,this.cHeight);this.ctx.stroke();}};//绘制坐标系LineChart.prototype.drawAxis = function(){// 绘制X轴this.ctx.beginPath();this.ctx.moveTo(this.x0,this.y0);this.ctx.lineTo(this.cWidth-this.space,this.y0);this.ctx.lineTo(this.cWidth-this.space-this.arrowSize,this.y0+this.arrowSize/2);this.ctx.lineTo(this.cWidth-this.space-this.arrowSize,this.y0-this.arrowSize/2);this.ctx.lineTo(this.cWidth-this.space,this.y0);this.ctx.strokeStyle = "#000";this.ctx.stroke();this.ctx.fill();//绘制y轴this.ctx.beginPath();this.ctx.moveTo(this.x0,this.y0);this.ctx.lineTo(this.x0,this.space);this.ctx.lineTo(this.x0+this.arrowSize/2,this.space+this.arrowSize);this.ctx.lineTo(this.x0-this.arrowSize/2,this.space+this.arrowSize);this.ctx.lineTo(this.x0,this.space);this.ctx.strokeStyle = "#000";this.ctx.stroke();this.ctx.fill();}//绘制点和连线LineChart.prototype.drawDotted = function(){//数据的坐标不是canvas的坐标，需要将数据的坐标转换成canvas坐标var that = this;var prevCanvasX = 0;var prevCanvasY = 0;data.forEach(function(item,i){//计算数据点的坐标var canvasX = that.x0+item.x;var canvasY = that.y0-item.y;//开始绘制数据点that.ctx.beginPath();that.ctx.moveTo(canvasX-that.dottedSize/2,canvasY-that.dottedSize/2);that.ctx.lineTo(canvasX+that.dottedSize/2,canvasY-that.dottedSize/2);that.ctx.lineTo(canvasX+that.dottedSize/2,canvasY+that.dottedSize/2);that.ctx.lineTo(canvasX-that.dottedSize/2,canvasY+that.dottedSize/2);that.ctx.fill();// 开始连线if(i==0){that.ctx.beginPath();that.ctx.moveTo(that.x0,that.y0);that.ctx.lineTo(canvasX,canvasY);that.ctx.setLineDash([5]);that.ctx.stroke();}else{that.ctx.beginPath();that.ctx.moveTo(prevCanvasX,prevCanvasY);that.ctx.lineTo(canvasX,canvasY);that.ctx.setLineDash([5]);that.ctx.stroke();}prevCanvasX = canvasX;prevCanvasY = canvasY;});}// 初始化构造函数var lineChart = new LineChart();lineChart.init(data);</script>

canvas--折线图相关推荐

Aristochart – 灵活的 HTML5 Canvas 折线图
Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...
基于Echarts的HTML5 Canvas折线图DEMO演示
HTML代码: <div id="lineChart" style="height: 400px;width:600px;background:white;marg ...
基于Echarts的HTML5 Canvas折线图柱状图DEMO演示
HTML代码 : <div id="barChart" style="height: 400px;width:600px;background:white;marg ...
html制作柱状图教程,基于Echarts的HTML5 Canvas折线图柱状图DEMO演示
JavaScript代码 : var barChart = { title: { text: '折柱混合图' }, dataZoom: { type:'inside',//slider //orien ...
微信小程序环形图/折线图(canvas)
实现效果图页面调用方式 <view class="ponet_warp"><view class="titel_name">环形百分比 ...
canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
带着canvas去流浪系列之二绘制折线图
[摘要] 用canvasAPI实现echarts简易图表示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明使用原生canvasAPI绘制 ...
使用canvas画折线图和曲线图
使用canvas画折线图和曲线图贝塞尔曲线如果想要在p0=>p2的过程中经过p1,那么需要计算出pc的值,在canvas之中作为控制点二次贝塞尔曲线转换为三次上面只是简单介绍,具体的参考文 ...
原生CANVAS语法实现的封装折线图和饼图
介绍首先canvas是html5的一种新标签,代表一个画布,可以在上面进行绘画.动画等操作.画布默认大小是300*150. canvas标签本生就是一个只是画布,可以导出为透明背景的png图片.要实 ...
前端------ canvas 绘制折线图详解
canvas时html5新添加的一个画布标签. 他有很多属性,大家可以在下边网址查看: http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布ca ...

canvas--折线图

canvas–折线图

canvas--折线图相关推荐

最新文章

热门文章