用canvas做柱状图

news2024/10/7 12:20:40

在这里插入图片描述

<!DOCTYPE HTML>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Canvans绘制统计图</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>

<body>
    <h1>Canvans绘制坐标系</h1>
    <canvas id="canvas" width="800" height="600">
        您的浏览器不支持Canvas标签！
    </canvas>
    <script>
        // var ctx = canvas.getContext('2d');
        //获取绘图工具
        var ctx = ctx || document.querySelector('canvas').getContext('2d');
        //获取画布大小
        var canvasWidth = ctx.canvas.width;
        var canvasHeight = ctx.canvas.height;
        console.log(canvasWidth, "canvasWidth")
        console.log(canvasHeight, "canvasHeight")
        const xAxis = ['黑布林大李子', '郭老师猕猴桃', '北京红富士', '吐鲁番葡萄', '新疆哈密瓜', '大鸭梨'];
        const yAxis = [600, 325, 185, 869, 566, 456];
        const cSpace = 10; // 间隔
        // 获取最大值；
        var arr = JSON.parse(JSON.stringify(yAxis)).sort((a, b) => {
            if (a - b > 0) {
                return 1;
            } else if (a - b < 0) {
                return -1;
            };
        })
        const maxValue = arr[arr.length - 1];

        const oneVal = Math.ceil(maxValue / 10);

        function Coordinate() {

            // 绘制x轴
            ctx.beginPath();
            ctx.moveTo(50, canvasHeight - 50);
            ctx.lineTo(canvasWidth - 50, canvasHeight - 50);
            ctx.lineTo(canvasWidth - 80, canvasHeight - 80);
            ctx.moveTo(canvasWidth - 80, canvasHeight - 20);
            ctx.lineTo(canvasWidth - 50, canvasHeight - 50);

            ctx.lineWidth = 1; // 线条宽度
            //ctx.lineJoin = 'miter';  //线的连接处出现尖角
            ctx.lineJoin = 'round';    //线的连接处出现圆角
            //ctx.lineJoin = 'bevel';  //线的连接处出现方角
            ctx.strokeStyle = '#000'; // 颜色
            ctx.stroke();

            //绘制Y轴
            ctx.beginPath();
            ctx.moveTo(50, canvasHeight - 50);
            ctx.lineTo(50, 50);
            ctx.lineTo(50 - 30, 80);
            ctx.moveTo(50, 50);
            ctx.lineTo(50 + 30, 80);

            ctx.strokeStyle = '#000'; // 颜色
            ctx.stroke();

            // 标y轴刻度尺
            setYAxis();
            // 标x轴刻度尺,并画柱状体
            setXAxis();
        }
        Coordinate();
        function getRad(degree) {
            return degree / 180 * Math.PI;
        }

        function setYAxis() {
            // 标y轴刻度尺
            var markerVal;
            var yMarker;
            for (var i = 0; i <= 10; i++) {
                markerVal = i*oneVal;
                ctx.restore();
                yMarker = Math.ceil((canvasHeight - 150) * (1 -(markerVal / maxValue))) + 100;
                ctx.fillText(markerVal, 30, yMarker, cSpace); // 文字

                // 画线
                if (i > 0) {
                    drawLine({axis: 'y', y:yMarker});
                }
            }
        }
        function setXAxis() {
            // 1.标x轴刻度尺
            var xyMark;
            var markerVal = (canvasWidth - 200) / xAxis.length;
            for (var i = 0; i <= xAxis.length - 1; i++) {
                xMarker = Math.ceil(i * markerVal) + markerVal;
                if (i === 0) {
                    xMarker = xMarker + 20;
                }
                ctx.font = "30px Arial";
                // ctx.restore(); // 返回上一次保存前
                ctx.textAlign="center";
                ctx.fillText(xAxis[i], xMarker, canvasHeight - 20, 40); // 文字
                
                // 画线
                drawLine({axis: 'x', x:xMarker});

                // 2.画柱状体
                xyMark = Math.ceil((canvasHeight - 150) * (yAxis[i] / maxValue)) + 50; // 高度
                ctx.fillText(yAxis[i], xMarker, canvasHeight - xyMark - 5); // 文字
                ctx.beginPath();
                ctx.rect( xMarker - 20, canvasHeight - 50, markerVal - 50, -xyMark + 50 );
                ctx.fillStyle = "green";
                ctx.fill();
                ctx.closePath();
            }
        }
        // 画线的方法
        function drawLine(obj) {
            ctx.beginPath();
            if (obj.axis === 'y') {
                ctx.moveTo(50, obj.y);
                ctx.lineTo(53, obj.y);
            } else {
                ctx.moveTo(obj.x, canvasHeight - 50);
                ctx.lineTo(obj.x, canvasHeight - 55);
            }
            ctx.stroke();
            ctx.closePath();
        }
    </script>
</body>

</html>