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()
}