Canvas画布绘制折线图

最新推荐文章于 2024-10-25 21:13:54 发布

DemonHunter211

最新推荐文章于 2024-10-25 21:13:54 发布

阅读量478

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/kwame211/article/details/104349379

版权

Web 专栏收录该内容

85 篇文章 1 订阅

订阅专栏

<head>
   <meta charset="utf-8" />
   <title></title>
   <style type="text/css">
       canvas {
           border: 1px solid #ddd;
           margin: 100px;
       }
   </style>
</head>

<body>
   <canvas width="600" height="400"></canvas>
   <script type="text/javascript">
       /*构造函数*/
       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 = 10;
           /*坐标原点*/
           this.x0 = this.space;
           this.y0 = this.canvasHeight - this.space;
           /*箭头大小*/
           this.arrowSize = 10;
           /*绘制点*/
           this.dottedSize = 6;

       }
       /*行为方法*/
       LineChart.prototype.init = function(data) {
           this.drawGrid();
           this.drawAxis();
           this.drawDotted(data);
       }
       /*绘制网格*/
       LineChart.prototype.drawGrid = function() {
           /*x方向的线*/
           var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
           for(var i = 0; i <= xLineTotal; i++) {
               this.ctx.beginPath();
               this.ctx.moveTo(0, i * this.gridSize - 0.5);
               this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
               this.ctx.strokeStyle = "#ddd";
               this.ctx.stroke();
           }
           /*y方向的线*/
           var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
           for(var i = 0; i <= yLineTotal; i++) {
               this.ctx.beginPath();
               this.ctx.moveTo(i * this.gridSize - 0.5, 0);
               this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
               this.ctx.strokeStyle = "#ddd";
               this.ctx.stroke();
           }
       }
       /*绘制坐标系*/
       LineChart.prototype.drawAxis = function() {
           /*x轴*/
           this.ctx.beginPath();
           this.ctx.strokeStyle = "black";
           this.ctx.moveTo(this.x0, this.y0);
           this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
           this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
           this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
           this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
           this.ctx.stroke();
           this.ctx.fill();
           /*y轴*/
           this.ctx.beginPath();
           this.ctx.strokeStyle = "black";
           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.stroke();
           this.ctx.fill();
       }
       /*绘制点*/
       LineChart.prototype.drawDotted = function(data) {
           /*转换成Canvas坐标*/
           /*绘制点*/
           /*连线*/
           var that = this;
           /*记录当前坐标*/
           var prevCanvasX = 0;
           var prevCanvasY = 0;
           data.forEach(function(item, i) {
               /*x=原点坐标+数据坐标*/
               /*y=原点坐标-数据坐标*/
               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.closePath();
               that.ctx.fill();
               /*点的连线*/
               if(i == 0) {
                   that.ctx.beginPath();
                   that.ctx.moveTo(that.x0, that.y0);
                   that.ctx.lineTo(canvasX, canvasY);
                   that.ctx.stroke();
               } else {
                   that.ctx.beginPath();
                   that.ctx.moveTo(prevCanvasX, prevCanvasY);
                   that.ctx.lineTo(canvasX, canvasY);
                   that.ctx.stroke();
               }
               /*记录当前坐标*/
               prevCanvasX = canvasX;
               prevCanvasY = canvasY;
           })
       }
       /*初始化*/
       var data = [{
           x: 100,
           y: 100
       }, {
           x: 200,
           y: 200
       }, {
           x: 300,
           y: 300
       }, {
           x: 400,
           y: 200
       }, {
           x: 500,
           y: 100
       }]
       var LineChart = new LineChart();
       LineChart.init(data);
   </script>
</body>