canvas 画出动态折线图

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

比如，绘制一个简单的矩形：

矩形.png


<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 查看。

比如，我要做一个折线的效果：

lineCanvas.png

首先，获取到画布的上下文，getContext("2d")；

然后，根据要显示的数值，调用上下文的 lineTo() 方法画出一条条的线，这些线连接起来就形成了趋势线的效果，


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>mycanvas</title>
</head>
<body>
    <div>
        <h2>line canvas</h2>
        <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.gif

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

canvas 画出动态折线图

推荐阅读更多精彩内容