canvas绘制折线图(仿echarts)

Posted lyyyyy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas绘制折线图(仿echarts)相关的知识,希望对你有一定的参考价值。

遇到的问题:Retina屏上字体线条模糊问题

解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" height="800px",再用css {width: 900px;height: 400px;}压缩。

 

最终效果如下图:

技术分享图片

代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>echarts绘制</title>
  6 </head>
  7 <body>
  8     <canvas id="canvas" width="1800px" height="800px" style="border: 1px solid #ebebed;width: 900px;height: 400px;"></canvas>
  9     <script>
 10         var scale = 2;
 11         var canvas = document.getElementById(canvas);
 12         var config = {
 13             width: canvas.width,
 14             height: canvas.height,
 15             Left: 70,
 16             Top: 90,
 17             Right: 30,
 18             Bottom: 60,
 19             color: ["#5266d7"],
 20             yLine:{
 21                 splitcount: 8,
 22                 data:[0,100,200,300,400,500,600,700,800]
 23             },
 24             xLine:{
 25                 splitcount: 9,
 26                 data:[1,2,3,4,5,6,7,8,9,10]
 27             },
 28             series:{
 29                 data:[0, 532, 555, 700, 500, 800, 300, 270, 358, 160, 453, 577, 639, 758, 233, 299, 120, 188, 158, 176, 333, 257, 120, 199, 573, 430, 111, 300, 700, 80, 50, 30, 40, 10, 22, 37, 77, 100, 240, 183, 143, 377, 133, 445, 345, 321, 111,12,3,34,456,235,214,43,21]
 30             }
 31         }
 32         var ctx = canvas.getContext(2d);
 33         // 绘制title
 34         drawText(单位: 次, config.Left, config.Top - 30, normal 22px Arial, #a3a2a7);
 35         // 绘制网格线
 36         darwBackLine(#cccccc, config.yLine.splitcount, 1, config.yLine.data);
 37         // 绘制x轴
 38         drawXLine(#939099, config.xLine.splitcount, 2, config.xLine.data);
 39         // 绘制线条
 40         drawLines(config.color[0], 2,config.series.data);
 41         // 绘制图例
 42         drawItem(test, config.color[0], 2);
 43 
 44 
 45         function darwBackLine(color, splitcount, linewidth, data) {
 46             var len = Math.floor((config.height - config.Top - config.Bottom)/splitcount);
 47             var start = config.Top;
 48             for (var i = 0; i < splitcount; i++) {
 49                 var point = start+len*i;
 50                 drawLine(config.Left, point, (config.width/2 - config.Right)*scale, point, color, linewidth);
 51                 drawText(data[splitcount-i], 10, point, normal 22px Arial, #605d68);
 52             }
 53             drawText(data[splitcount-i], 10, point+len, normal 22px Arial, #605d68);
 54         }
 55 
 56         function drawXLine(color, splitcount, linewidth, data) {
 57             var left = config.Left;
 58             var top = config.height - config.Bottom;
 59             var right = (config.width/2 - config.Right)*scale;
 60             drawLine(config.Left, top, right, top, color, linewidth);
 61             var len = (right - left)/splitcount;
 62 
 63             for (var i = 0; i < splitcount+1; i++) {
 64                 var xpoint = left+len*i;
 65                 drawLine(xpoint,top+linewidth,xpoint, top-5*scale, color, linewidth);
 66                 var PanningLeft = data[i].toString().length*5;
 67                 drawText(data[i], xpoint-PanningLeft, top+15*scale, normal 22px Arial, #605d68)
 68             }
 69         }
 70 
 71         function drawLines(color, linewidth, data) {
 72             var count = data.length;
 73             var left = config.Left;
 74             var top = config.height - config.Bottom;
 75             var right = (config.width/2 - config.Right)*scale;
 76             var len = (right - left)/(count - 1);
 77             var i = 0;
 78 
 79             var interval = setInterval(function() {
 80                 if(i >= count - 1){
 81                     clearInterval(interval);
 82                     return;
 83                 }
 84                 drawLine(left+len*i, top-(data[i]/800)*(top - config.Top), left+len*(i+1), top-(data[i+1]/800)*(top - config.Top), color, linewidth, bevel);
 85                 i++;
 86             }, 30);
 87         }
 88 
 89         function drawItem(text, color, linewidth) {
 90             var right = (config.width/2 - config.Right)*scale;
 91             var left = right-(text.length*10);
 92             drawText(text, left, config.Top - 10, normal 22px Arial, #605d68);
 93             drawLine(left-20, config.Top - 15, left-80, config.Top - 15, color, linewidth);
 94         }
 95 
 96         function drawLine(startX, startY, endX, endY, color, width, lineJoin) {
 97             ctx.beginPath();
 98             ctx.moveTo(startX, startY);
 99             ctx.lineTo(endX, endY);
100             if(color){
101                 ctx.strokeStyle = color
102             }
103 
104             if(width){
105                 ctx.lineWidth = width*scale;
106             }
107 
108             if(lineJoin){
109                 ctx.lineJoin = lineJoin;
110             }
111             
112             ctx.closePath();
113             ctx.stroke(); 
114         }
115 
116         function drawText(text, x, y, font, color) {
117             ctx.font= font;
118             ctx.fillStyle= color;
119             ctx.fillText(text, x, y);
120         }
121     </script>
122 </body>
123 </html>

以上是关于canvas绘制折线图(仿echarts)的主要内容,如果未能解决你的问题,请参考以下文章

vue中绘制echarts折线图

Android自定义View - 仿支付宝月账单折线图

Android自定义组件系列——Canvas绘制折线图

vue使用echarts,绘制折线图

折线图(用ECharts绘制)

echarts图表——折线图&饼图