canvas 曲线图双数值轴山峰图

xl__qd
已于 2023-11-12 08:00:07 修改
阅读量196
点赞数
文章标签： canvas 山峰图曲线图折线图
于 2023-11-10 23:16:24 首次发布
本文链接：https://blog.csdn.net/lcc2001/article/details/134342641
版权
下面的代码本人亲自撰写，原生不易啊。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
</body>

<script>
    class MyCanvas {
        static dom = null;
        static ctx = null;
        static canvasWidth = 0;
        static canvasHeight = 0;
        static config = null;
        static valx = 0;
        static valy = 0;
        static xlist = [];
        static ylist = [];
        static lenTrue = 0;

        init(dom) {
            MyCanvas.dom = dom
            MyCanvas.ctx = MyCanvas.dom.getContext('2d');
            MyCanvas.canvasWidth = MyCanvas.ctx.canvas.width;
            MyCanvas.canvasHeight = MyCanvas.ctx.canvas.height;
        }
        // 配置参数
        setOption(config) {
            MyCanvas.ctx.clearRect(0, 0, MyCanvas.dom.width, MyCanvas.dom.height);
            MyCanvas.config = config
            MyCanvas.xlist = config.series.data.map(e => e[0]);
            MyCanvas.ylist = config.series.data.map(e => e[1]);
            MyCanvas.valx = MyCanvas.x1valjpx()
            MyCanvas.valy = MyCanvas.y1valjpx()
            MyCanvas.ctx.lineWidth = 1;
            MyCanvas.xGraduate()
            MyCanvas.xDashedLine()
            MyCanvas.yGraduate()
            MyCanvas.yDashedLine()
            MyCanvas.curve()
        }
        static getRandomColor() {
            let color = `hsl(${Random(0, 360)},${Random(50, 100)}%,${Random(20, 60)}%)`
            function Random(min, max) {
                return Math.round(Math.random() * (max - min)) + min;
            }
            return color
        }
        // 绘制曲线
        static curve() {
            const left = MyCanvas.config.grid.left
            const curvature = MyCanvas.config.series.curvature
            // xhb:曲线两个落点都是y轴最大的px值
            const xhb = MyCanvas.canvasHeight - 20
            MyCanvas.ctx.beginPath();
            MyCanvas.ctx.setLineDash([]);
            MyCanvas.ylist.forEach((e, i) => {
                MyCanvas.ctx.strokeStyle = MyCanvas.getRandomColor();
                MyCanvas.ctx.lineWidth = 3;
                // xy是控制点的xy坐标
                const x = MyCanvas.xlist[i] * MyCanvas.valx + left
                const y = e * MyCanvas.valy * 2
                const line = new Path2D();
                line.name = MyCanvas.config.series.data[i][2]
                line.moveTo(x - curvature, xhb);
                line.quadraticCurveTo(x, xhb - y, x + curvature, xhb);
                MyCanvas.ctx.stroke(line);
                MyCanvas.dom.addEventListener("mousemove", (event) => {
                    const isPointInPath = MyCanvas.ctx.isPointInStroke(line, event.offsetX, event.offsetY);
                    if (isPointInPath) {
                        // 曲线被悬浮
                        console.log(line);
                    }
                });
            })
        }
        // 求x轴每一份值对应了多少实际px值
        static x1valjpx() {
            const max = Math.max(...MyCanvas.xlist)
            const interval = MyCanvas.config.xAxis.interval
            const curvature = MyCanvas.config.series.curvature
            // 总间隔数
            const len = Math.ceil(max / interval)
            // 总值数
            const valz = len * interval
            const left = MyCanvas.config.grid.left
            const right = MyCanvas.config.grid.right
            const xw = MyCanvas.canvasWidth - left - right
            // 求出每一份x值对应的图表里面的x轴px数值
            const valx = xw / valz
            const maxql = max * valx + curvature
            if (maxql > xw) {
                // 说明最大x将会超出可画范围，需要增加竖线
                let lenTrue = len
                let maxqlTrue = maxql
                let valxTrue = valx
                while (maxqlTrue > xw) {
                    lenTrue++
                    // 总值数
                    const valz = lenTrue * interval
                    // 求出每一份x值对应的图表里面的y轴px数值
                    valxTrue = xw / valz
                    maxqlTrue = max * valxTrue + curvature
                }
                MyCanvas.lenTrue = lenTrue
                return valxTrue
            }
            return valx
        }
        // 求y轴每一份值对应了多少实际px值
        static y1valjpx() {
            const max = Math.max(...MyCanvas.ylist)
            const interval = MyCanvas.config.yAxis.interval
            const curvature = MyCanvas.config.series.curvature
            // 总间隔数
            const len = Math.ceil(max / interval)
            // 总值数
            const valz = len * interval
            const top = MyCanvas.config.grid.top
            const bottom = MyCanvas.config.grid.bottom
            const xh = MyCanvas.canvasHeight - top - bottom
            // 求出每一份y值对应的图表里面的y轴px数值
            return xh / valz
        }
        // 绘制x轴刻度值，从左到右画
        static xGraduate() {
            const grid = MyCanvas.config.grid
            const xAxis = MyCanvas.config.xAxis
            const gridLen = Object.keys(grid).length
            const curvature = MyCanvas.config.series.curvature
            MyCanvas.ctx.beginPath();
            MyCanvas.ctx.strokeStyle = '#000';
            MyCanvas.ctx.textAlign = "center";
            MyCanvas.ctx.textBaseline = "top";
            MyCanvas.ctx.font = "14px Arial";
            if (gridLen) {
                const left = MyCanvas.config.grid.left
                const right = MyCanvas.config.grid.right
                const top = MyCanvas.config.grid.top
                const bottom = MyCanvas.config.grid.bottom
                const interval = MyCanvas.config.xAxis.interval
                let len = 0
                if (MyCanvas.lenTrue) {
                    len = MyCanvas.lenTrue
                } else {
                    const max = Math.max(...MyCanvas.lxList)
                    len = Math.ceil(max / interval)
                }
                const xw = MyCanvas.canvasWidth - left - right
                const jg = xw / len
                for (let i = 0; i < len + 1; i++) {
                    if (i) {
                        MyCanvas.ctx.fillText(interval * i, left + (jg * i), MyCanvas.canvasHeight - bottom + xAxis.kdjl)
                    }
                }
            }
        }
        // 绘制x刻度虚线，从右到左画
        static xDashedLine() {
            const grid = MyCanvas.config.grid
            const gridLen = Object.keys(grid).length
            const curvature = MyCanvas.config.series.curvature
            MyCanvas.ctx.beginPath();
            MyCanvas.ctx.strokeStyle = MyCanvas.config.xAxis.dashedColor;
            MyCanvas.ctx.setLineDash([3, 2]);
            if (gridLen) {
                const left = MyCanvas.config.grid.left
                const right = MyCanvas.config.grid.right
                const top = MyCanvas.config.grid.top
                const bottom = MyCanvas.config.grid.bottom
                const interval = MyCanvas.config.xAxis.interval
                let len = 0
                if (MyCanvas.lenTrue) {
                    len = MyCanvas.lenTrue
                } else {
                    const max = Math.max(...MyCanvas.lxList)
                    len = Math.ceil(max / interval)
                }
                // x方向可画范围px
                const xw = MyCanvas.canvasWidth - left - right
                const jg = xw / len
                for (let i = 0; i < len + 1; i++) {
                    MyCanvas.ctx.moveTo(MyCanvas.canvasWidth - right - (jg * i), MyCanvas.canvasHeight - bottom);
                    MyCanvas.ctx.lineTo(MyCanvas.canvasWidth - right - (jg * i), top);
                }
            }
            MyCanvas.ctx.stroke();
        }
        // 绘制y刻度虚线，从下到上画
        static yDashedLine() {
            const grid = MyCanvas.config.grid
            const gridLen = Object.keys(grid).length
            MyCanvas.ctx.beginPath();
            MyCanvas.ctx.strokeStyle = MyCanvas.config.yAxis.dashedColor;
            MyCanvas.ctx.setLineDash([3, 2]);
            if (gridLen) {
                const left = MyCanvas.config.grid.left
                const right = MyCanvas.config.grid.right
                const top = MyCanvas.config.grid.top
                const bottom = MyCanvas.config.grid.bottom
                const max = Math.max(...MyCanvas.ylist)
                const interval = MyCanvas.config.yAxis.interval
                const len = Math.ceil(max / interval)
                const xh = MyCanvas.canvasHeight - top - bottom
                const jg = xh / len
                for (let i = 0; i < len + 1; i++) {
                    MyCanvas.ctx.moveTo(left, MyCanvas.canvasHeight - bottom - (jg * i));
                    MyCanvas.ctx.lineTo(MyCanvas.canvasWidth - right, MyCanvas.canvasHeight - bottom - (jg * i));
                }
            }
            MyCanvas.ctx.stroke();
        }
        // 绘制y刻度值，从下到上画
        static yGraduate() {
            const grid = MyCanvas.config.grid
            const yAxis = MyCanvas.config.yAxis
            const gridLen = Object.keys(grid).length
            MyCanvas.ctx.beginPath();
            MyCanvas.ctx.strokeStyle = '#000';
            MyCanvas.ctx.textAlign = "right";
            MyCanvas.ctx.textBaseline = "middle";
            MyCanvas.ctx.font = "14px Arial";
            if (gridLen) {
                const left = MyCanvas.config.grid.left
                const right = MyCanvas.config.grid.right
                const top = MyCanvas.config.grid.top
                const bottom = MyCanvas.config.grid.bottom
                const max = Math.max(...MyCanvas.ylist)
                const interval = MyCanvas.config.yAxis.interval
                const len = Math.ceil(max / interval)
                const xh = MyCanvas.canvasHeight - top - bottom
                const jg = xh / len
                for (let i = 0; i < len + 1; i++) {
                    if (i == 0) {
                        MyCanvas.ctx.fillText(0, left - yAxis.kdjl, MyCanvas.canvasHeight - bottom)
                    } else {
                        MyCanvas.ctx.fillText(interval * i, left - yAxis.kdjl, MyCanvas.canvasHeight - bottom - (jg * i))
                    }
                }
            }
        }
    }
    const myCanvas = document.querySelector('#myCanvas');
    const canvas = new MyCanvas()
    canvas.init(myCanvas)
    canvas.setOption({
        grid: {
            top: 20,
            right: 20,
            bottom: 20,
            left: 40,
        },
        yAxis: {
            dashedColor: '#000',
            kdjl: 8, // 刻度与轴线距离
            interval: 5, // 每条虚线间隔（单位不是px，而是数值，对应刻度值距离值）
        },
        xAxis: {
            dashedColor: '#000',
            kdjl: 8, // 刻度与轴线距离
            interval: 5, // 每条虚线间隔（单位不是px，而是数值，对应刻度值距离值）
        },
        series: {
            curvature: 20,// 曲线曲率单位px
            data: [[10, 20, '信号1'], [8, 23, '信号2'], [15, 30, '信号3'], [25, 10, '信号4'], [44, 58, '信号5']]
        }
    })
</script>

</html>