使用h5新特性canvas简单生成一个柱状图

作者: 光年之外iii | 来源:发表于2019-11-09 20:26 被阅读0次

使用h5新特性canvas简单生成一个柱状图
html5新特性及常见问题
H5新特性---canvas
canvas图表(1) - 柱状图
h5新特性和viewport
生成背景带高斯模糊的海报
第四天h5,css3
canvas绘制柱状图
三 canvas简单入门
HTML5新特性

要展现一种数据，最直观的方式便是生成数据图，图例永远要比文字说明更加的清晰明了。因此，今天来生成一个利用canvas画布上的柱状图。
首先，先设置一个x，y轴，以便于柱状图的生成

var canvas = document.getElementById('mycanvas')
    var ctx = canvas.getContext('2d')
    //获取画布的id。以及声明画布的书写方式为2d
    //创建备用的数据
    var data = {
        x: ["一月", "二月", "三月", "四月", "五月", "六月"],
        y: ["0", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"],
        val: ["300", "210", "120", "560", "800", "660"],
        col: ["red", "green", "blue", "skyblue", "limegreen", "pink"]
    }
    //画出x，y轴，并提前设置居中样式
    ctx.translate(10, 900)
    ctx.beginPath();
    ctx.moveTo(10, 0);
    ctx.lineTo(810, 0);
    ctx.strokeStyle = 'blue';
    ctx.closePath()
    ctx.stroke()
    ctx.beginPath();
    ctx.moveTo(10, 0);
    ctx.lineTo(10, -800);
    ctx.strokeStyle = 'blue';
    ctx.closePath()
    ctx.stroke() 
    ctx.textAlign='center';
    ctx.textBaseline='middle'

准备完成后，开始绘出柱状图

 for (var i = 0; i < data.val.length; i++) {
        ctx.beginPath();
        ctx.moveTo(60 * (i + 1), 0);
        //画出柱状图的位置，并给柱状图设置一个宽度
        ctx.lineWidth = 40;
        ctx.lineTo(60 * (i + 1), -data.val[i] / (10 / 8));
        //按照比例对柱状图实际的尺寸进行缩小
        ctx.strokeStyle = data.col[i];
        //将数据，以及x轴参照数据点写入
        ctx.fillText(data.x[i],60*(i+1),-data.val[i]/(10/8)-10)
        ctx.closePath()
        ctx.stroke()
    }

绘制出y轴的数据点

for (var j = 0; j < data.y.length; j++) {
        ctx.beginPath();
        ctx.moveTo(0, -80*j);
        ctx.lineTo(10, -80 * j);
        ctx.fillText(data.y[j],20,-80*j)
        ctx.strokeStyle = 'blue';
        ctx.closePath();
        ctx.stroke();
        
    }

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="mycanvas" width="1000" height="1000" style="border:1px solid #f23"></canvas>
</body>
<script>
    var canvas = document.getElementById('mycanvas')
    var ctx = canvas.getContext('2d')
    //获取画布的id。以及声明画布的书写方式为2d
    //创建备用的数据
    var data = {
        x: ["一月", "二月", "三月", "四月", "五月", "六月"],
        y: ["0", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"],
        val: ["300", "210", "120", "560", "800", "660"],
        col: ["red", "green", "blue", "skyblue", "limegreen", "pink"]
    }
    //画出x，y轴，并提前设置居中样式
    ctx.translate(10, 900)
    ctx.beginPath();
    ctx.moveTo(10, 0);
    ctx.lineTo(810, 0);
    ctx.strokeStyle = 'blue';
    ctx.closePath()
    ctx.stroke()
    ctx.beginPath();
    ctx.moveTo(10, 0);
    ctx.lineTo(10, -800);
    ctx.strokeStyle = 'blue';
    ctx.closePath()
    ctx.stroke() 
    ctx.textAlign='center';
    ctx.textBaseline='middle'
    for (var j = 0; j < data.y.length; j++) {
        ctx.beginPath();
        ctx.moveTo(0, -80*j);
        ctx.lineTo(10, -80 * j);
        ctx.fillText(data.y[j],20,-80*j)
        ctx.strokeStyle = 'blue';
        ctx.closePath();
        ctx.stroke();
        
    }

    for (var i = 0; i < data.val.length; i++) {
        ctx.beginPath();
        ctx.moveTo(60 * (i + 1), 0);
        //画出柱状图的位置，并给柱状图设置一个宽度
        ctx.lineWidth = 40;
        ctx.lineTo(60 * (i + 1), -data.val[i] / (10 / 8));
        //按照比例对柱状图实际的尺寸进行缩小
        ctx.strokeStyle = data.col[i];
        //将数据，以及参照数据点写入
        ctx.fillText(data.x[i],60*(i+1),-data.val[i]/(10/8)-10)
        ctx.closePath()
        ctx.stroke()
    }
</script>

</html>