canvas 柱线图案列

html

<canvas id="myCan" width="800" height="700" style="border:2px solid #ccc"></canvas>

js

data1 = {
        x: ['一月', '二月', '三月', '四月', '五月', '六月', ],
        y: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900],
        data: [100, 200, 300, 400, 800, 660],
        col: ["red", "green", "blue", "skyblue", "limegreen", "pink", ]
    }
    var c = document.getElementById('myCan');
    var ctx = c.getContext('2d');
    ctx.beginPath()
    ctx.translate(80, 600)
    ctx.moveTo(0, 0);//起始点
    ctx.lineTo(0, -500);//路径
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.strokeStyle = 'blue'
    // ctx.lineWidth = 4
    ctx.stroke()
    // ctx.beginPath()
    ctx.textAlign = 'center';    //文本水平对齐方式:left right center
    ctx.textBaseline = 'middle' //文本垂直对齐方式:top middel bottom
    //y轴
    for (var i = 1; i < data1.y.length; i++) {
        ctx.beginPath()
        ctx.moveTo(0, -data1.y[i] / 2)
        ctx.lineTo(-10, -data1.y[i] / 2)
       
        ctx.stroke()
        ctx.fillText(data1.y[i], -30, -data1.y[i] / 2)
    }
    //x轴
    for (var i = 0; i < data1.data.length; i++) {   

        ctx.beginPath()
        ctx.moveTo((i + 1) * 60, 0)
        ctx.lineTo((i + 1) * 60, -data1.data[i] / 2)  //调整比例
        // console.log(i * 60)
        ctx.strokeStyle = 'red'
        ctx.lineWidth = 40//  线的宽度
        ctx.strokeStyle = `${data1.col[i]}`  //设置描边颜色
        ctx.stroke()
        ctx.fillText(data1.x[i], (i + 1) * 60, 15) //添加文字
        ctx.fillText(data1.data[i], (i + 1) * 60, -data1.data[i] / 2 - 10)
        // ctx.fill()
    }