cancas画一个柱状图

先生成一个画布
html中

<canvas id="myCanvas" width="1000px" height="800px" style="border: 1px solid black;"></canvas>

在js中写好数据

 var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    data1 = {
        x: ['一月', '二月', '三月', '四月', '五月', '六月',"七月","八月","九月","十月","十一月","十二月" ],
        y: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900,1000 ],
        val: [100, 300, 200, 400, 800, 660,520,134,666,888,120,713],
        col: ["red", "green", "blue", "skyblue", "limegreen", "pink", "black","gray","#f20","#ccc","#f99","#666"]
    }
    ctx.translate(80, 700)
    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(800, 0)
    ctx.stroke()

    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -600)
    ctx.stroke()
    ctx.textAlign ="center"
    ctx.textBaseline="middle"
    for (var j in data1.y) {
        ctx.beginPath();
        ctx.fillText(data1.y[j], -30, -j * 50)
        ctx.moveTo(0, -j * 50)
        ctx.lineTo(-10, -j * 50)
        ctx.stroke()
    }

    for (var i = 0; i < data1.val.length; i++) {
        ctx.beginPath();
        ctx.moveTo((i + 1 ) * 60, 0)
        ctx.lineTo((i + 1) * 60, -data1.val[i] / 2);
        ctx.lineWidth = 40
        ctx.strokeStyle = data1.col[i]
        ctx.stroke();
        ctx.closePath();
        ctx.fillText(data1.x[i],(i+1)*60,10)
        ctx.fillText(data1.val[i],(i+1)*60,-data1.val[i] / 2-10)
    }

先画一横一竖两根轴线，并把它们位移到想要的位置，然后循环数据，画数据中那么多线，并把线的宽度设大，让它便于我们看，循环数据把颜色写入，再把轴线上的字写入。