原生html js css绘制折现图,JavaScript canvas绘制折线图

本文实例为大家分享了canvas绘制折线图的具体代码，供大家参考，具体内容如下

Title

canvas {

border: 1px solid #ccc;

}

/*1.构造函数*/

var LineChart = function (ctx) {

/*获取绘图工具*/

this.ctx = ctx || document.querySelector('canvas').getContext('2d');

/*画布的大小*/

this.canvasWidth = this.ctx.canvas.width;

this.canvasHeight = this.ctx.canvas.height;

/*网格的大小*/

this.gridSize = 10;

/*坐标系的间距*/

this.space = 20;

/*坐标原点*/

this.x0 = this.space;

this.y0 = this.canvasHeight - this.space;

/*箭头的大小*/

this.arrowSize = 10;

/*绘制点*/

this.dottedSize = 6;

/*点的坐标 和数据有关系 数据可视化*/

}

/*2.行为方法*/

LineChart.prototype.init = function (data) {

this.drawGrid();

this.drawAxis();

this.drawD