如何制作柱状图

昨天统计数据 做了一个柱形图，现在我来给大家分享一下

 <script>
// 首先创建一个数组
var data = [
    {
        name: '老王',
        num: 10,
    },
    {
        name: '老管',
        num: 100,
    },
    {
        name: '老李',
        num: 10,
    },
    {
        name: '老彪',
        num: 100,
    },
    {
        name: '老帅',
        num: 10,
    },
    {
        name: '老宋',
        num: 100,
    },
];


// 在这里创建一个canvas
var canvas = document.createElement('canvas');

// 这个是用来获取前后文
var ctx = canvas.getContext('2d');

// 这里设置一下属性    
canvas.width = 500;
canvas.height = 500;
canvas.style.border = '1px solid #ccc';

// 把canvas添加到body    
document.body.appendChild(canvas);

// 移动一下原点
ctx.translate(50, 450);

// 这里求一下x轴数据的间隔 x轴起点要空出来 所以加1
var mangin = 400 / (data.length + 1)

// 求出y轴数据的的最大值
let maxNum = JSON.parse(JSON.stringify(data)).sort(function (a, b) {
    return b.num - a.num;
})[0].num;

// 调用fn() 并存进去
var colorArr = data.map(function () {
    return fn();
})

// 监听事件
canvas.addEventListener('mousemove', function (e) {
    ctx.clearRect(-50, -450, 500, 500);
    a(e);
});

// 调用
a();
function a(e) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -400);
    ctx.moveTo(0, 0);
    ctx.lineTo(400, 0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();


// 文本居中
    ctx.textAlign = 'center';
// 文本垂直居中
    ctx.textBaseline = 'middle';
// 在y轴上画刻度
    for (var i = 50; i <= 400; i += 50) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(-5, -i);
        ctx.lineTo(5, -i);
        ctx.fillText(Math.floor((i / 400 * maxNum)), -15, -i);
        ctx.stroke();
        ctx.restore();
    }
// 将数据写到x轴上
    for (var i = 0; i < data.length; i++) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = colorArr[i];
        ctx.rect(mangin * (i + 1), 0, 20, -(data[i].num / maxNum * 400));
// 如果鼠标的坐标 到 元素左侧的距离 和 鼠标 到 元素顶部的距离 在上下文的范围内，则触发时间
        if (e && ctx.isPointInPath(e.offsetX, e.offsetY)) {
            ctx.fillStyle = 'pink';
            ctx.fillText(data[i].num, mangin * i + 68, -data[i].num / maxNum * 400 - 10)
        }
        ctx.fillText(data[i].name, mangin * (i + 1) + 10, 15);
        ctx.fill();
        ctx.closePath();
        ctx.restore();
    }

}

// 封装一个随机颜色
function fn() {
    return `rgba(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},1)`
}

</script>