canvas 画出动态折线图

canvas 是 html5 支持的一个标签,用于图形的绘制。canvas 标签仅仅提供了图形的容器,必须通过 js 脚本来绘制。

比如,绘制一个简单的矩形:
canvas 画出动态折线图_第1张图片

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">canvas>

<script>
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.fillRect(0,0,150,75);
script>

这里就不做入门普及了,可直接搜索相关 API 查看。

比如,我要做一个折线的效果:
canvas 画出动态折线图_第2张图片

首先,获取到画布的上下文,getContext(“2d”);
然后,根据要显示的数值,调用上下文的 lineTo() 方法画出一条条的线,这些线连接起来就形成了趋势线的效果,


<html lang="en" >
<head>
    <meta charset="utf-8">
    <title>mycanvastitle>
head>
<body>

	<div>
	<h2>line canvash2>
		<canvas id="myCanvas" width="300" height="200" style="border:1px solid #ccc;">canvas>
	div>


<script src="jquery-1.7.2.min.js">script>
<script>
  window.onload = function () {
            var arr = [40, 50, 30, 70, 80, 40, 90, 60, 80, 60, 69, 80, 80, 40, 50, 30, 70, 80, 40, 77, 80, 70, 60, 50, 80];
            drawLine.minCurve(arr);
        } 

        var drawLine = {};
        !function () {           
            //求数组最大值
            Array.prototype.max = function () {
                var max = this[0];
                var len = this.length;
                for (var i = 1; i < len; i++) {
                    if (this[i] > max) {
                        max = this[i];
                    }
                }
                return max;
            }
            function draw(arr) {                
                var width = 300, height = 200;
                var maxV = arr.max();
                //计算y轴增量
                var yStep = height / maxV;
                console.log(maxV);
                var domCan = document.getElementById("myCanvas");
                var context = domCan.getContext("2d");       
                context.beginPath();
                context.lineWidth = 2;
                context.strokeStyle = "#395B73";
                //context.moveTo(0, 0);//开始画图的位置
                var x_space = width / (arr.length - 1);//水平点的间隙像素           
                //context.lineTo(15, 60); x表示水平向右延伸,y表示垂直高度位置,从画板最左上角(0,0)开始计算坐标
                var xLen = 0;
                for (var i = 0; i < arr.length; i++) {
                    var yValue = arr[i];//纵坐标值
                    xLen += x_space;
                    var yPont = height - yValue * yStep;
                    if (i == 0) {
                        xLen = 0;
                    }
                    var m = xLen + "," + yPont;
                    console.log(m);
                    context.lineTo(xLen, yPont);
                }        
                context.stroke();
                context.closePath();
            }
            drawLine.minCurve = draw;
        }();
      
script>
body>
html>

下面来个组合练习,我要实现动态的效果,就是折线是动态生成的;这个也不难,就是设置一个定时器,一段一段触发就行了;那么,咱们再增加一点难度,我要同时展示 4 个趋势折线,4 个折线都与时间关联,也就是同一个时间点显示 4 组不同的数据,同时,还要支持时间段的切换,比如 1 分钟和 10 分钟不同的时间段;像下面这样:
canvas 画出动态折线图_第3张图片

你可以尝试自己实现一下,这里提供一个前端的实现参考,前端代码下载。

你可能感兴趣的:(前端)