IFE第三十四天到第三十六天：我是精明的小卖家（二）（SVG和Canvas练习）

Task1（svg小练习）

Task2（柱状图）

bar.js

function getBar(data) {
    // 定义好柱状图绘制区域的高度，宽度，轴的高度，宽度
    var w = 550,
        h = 350,
        axisX = 500,
        axisY = 300,
        startX = 25,
        startY = 325;
    // 定义好每一个柱子的宽度及柱子的间隔宽度
    var barWidth = 32,
        interval = 9;
    // 定义好柱子颜色，轴的颜色
    var barColor = "#0DAFF4",
        axisColor = "rgb(0,99,99)";
    // 拿到柱状图中的最大值Max
    var max = data[0];
    for (var i in data) {
        if (data[i] > max) {
            max = data[i];
        }
    }
    // 根据Max和你用来绘制柱状图图像区域的高度，进行一个数据和像素的折算比例
    var percent = 1;

    var svgStart = '';
    // 绘制横轴及纵轴
    var row = "';
    var col = "';
    // 遍历数据，计算将要绘制柱子的高度和位置，绘制每一个柱子
    var svgT = svgStart + row + col;

    for (let i = 0; i < data.length; i++) {

        let rectStartX = startX + interval * (i + 1) + barWidth * i;
        let rectStartY = startY - data[i];

        var bar = "';
        svgT += bar;
    }
    svgT += svgEnd;

    return svgT;
}

Task3（Canvas小练习）

Task4（折线图）

line.js

function getLine(data) {
    //定义好折线图绘制区域的高度，宽度，轴的高度，宽度
    var w = 550,
        h = 350,
        axisX = 500,
        axisY = 300,
        startX = 10,
        startY = 10;
    //定义好每一个数据点的直径，颜色，线的颜色，宽度
    var pDiameter = 5,
        pColor = "#000000",
        lColor = "#37A2DA",
        lWidth = 2;
    //定义好每两个数据点之间的横向间隔距离
    var interval = 40;
    //拿到折线图中的最大值Max
    var max = data[0];
    for (var i in data) {
        if (data[i] > max) {
            max = data[i];
        }
    }
    //根据Max和你用来绘制折线图图像区域的高度， 进行一个数据和像素的折算比例
    var pencent = 1;

    //绘制横轴及纵轴
    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");
    canvas.setAttribute("height", h);
    canvas.setAttribute("width", w);
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(startX, startY + axisY);
    ctx.lineTo(startX + axisX, startY + axisY);
    ctx.strokeStyle = pColor;
    ctx.stroke();

    //遍历数据，计算将要绘制数据点的坐标，绘制数据点
    ctx.moveTo(70, 350 - data[0]);
    ctx.beginPath();
    for (let i = 0; i < data.length; i++) {
        let x = 15 + interval * (i + 1);
        let y = axisY - data[i];

        ctx.lineTo(x, y);
        ctx.arc(x, y, pDiameter / 2, 0, Math.PI * 2);
        ctx.strokeStyle = lColor;

        ctx.stroke();
    }
}

这一节下面还有几个task，包括让图表数据可变、绘制多条折线图、绘制多个柱状图，但是我没有继续做。原因是，我感觉接下来的练习已经偏离了练习svg和canvas的初衷。我们不必要去重复造轮子，将来画图表肯定是要用框架进行的。svg和canvas这两个元素，我们只要理解并掌握它们的原理和用法即可，再用它们做更多复杂的东西也不现实。