SVG 柱状图图表

最新推荐文章于 2024-05-21 18:26:14 发布

TerranceTang

最新推荐文章于 2024-05-21 18:26:14 发布

阅读量724

点赞数 1

分类专栏： svg 文章标签： javascript echarts 前端 html5 html

本文链接：https://blog.csdn.net/TerranceTang/article/details/121834365

版权

svg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

svg 手绘简单柱状图图表练手

效果图展示

在这里插入图片描述
只是简单的练手有很多不足的地方，下面就贴代码：

下面展示一些 内联代码片。

// An highlighted block
<!DOCTYPE html>
<html lang="en">

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

<body>
    <svg width='1000' height='700'>
        <g id='轴线'>
            <line x1='50' y1='600' x2='950' y2='600' style="stroke:#000;stroke-width:1px" id="X轴"></line>
            <path d='M 950,595 L 960,600 L 950,605 ' id='三角标X'></path>
            <path d='M 95,50 L 105,50 L 100,40 ' id='三角标Y'></path>
            <line x1='100' y1='650' x2='100' y2='50' style="stroke:#000;stroke-width:1px" id='Y轴'></line>
        </g>

        <g id='X坐标'>
            <!-- <line x1='200' y1='600' x2='200' y2='580' style="stroke:#000;stroke-width:1px"></line> -->
        </g>
        <g id='y坐标'>
            <!-- <line x1='100' y1='100' x2='110' y2='100' style="stroke:#000;stroke-width:1px"></line> -->
        </g>
        <g id='柱状图'>

        </g>
    </svg>
</body>
<script>
    let data = [{
        date: '星期1',
        value: 1200,
    },
    {
        date: '星期2',
        value: 700,
    },
    {
        date: '星期3',
        value: 500,
    },
    {
        date: '星期4',
        value: 800,
    },]
    let xJg = 600 / data.length
    let yJg = 450 / 12
    for (let i = 0; i < data.length; i++) {
      
        kdu(i)
        bar(i)
    }
    // 插入X刻度
    function kdu(i) {
        let lineDom = document.createElement('line')
        lineDom.className = 'axis'
        lineDom.setAttribute('x1', 100 + (i +1) * xJg)  // x1
        lineDom.setAttribute('y1', 600)
        lineDom.setAttribute('x2', 100 + (i +1) * xJg)
        lineDom.setAttribute('y2', 580)
        let zBGroup = document.querySelector('#X坐标')

        // zBGroup.innerHTML = lineDom.outerHTML + zBGroup.innerHTML
        zBGroup.innerHTML = lineDom.outerHTML + zBGroup.innerHTML + `<text x="${80 + (i +1) * xJg}" y='620'>${data[i].date} </text>`
    }
    // 渲染Y轴的刻度
    for(let j =1;j<=12; j++) {
        let lineDom = document.createElement('line')
        lineDom.className = 'axis'
        lineDom.setAttribute('x1', 100)  // x1
        lineDom.setAttribute('y1', 600 - (j ) * yJg)
        lineDom.setAttribute('x2', 110)
        lineDom.setAttribute('y2', 600 - (j ) * yJg)
        let zBGroup = document.querySelector('#y坐标')
        zBGroup.innerHTML = lineDom.outerHTML + zBGroup.innerHTML + `<text x="${50}" y='${600 - (j ) * yJg}'>${j * 100} </text>`
    }
        // 渲染柱状图
    function bar(i) {
        // 获取柱状图的分组
        let barDom = document.querySelector('#柱状图')
        // 创建一个柱状图的元素
        let bar = document.createElement('rect')
        // 随机颜色
        let radrou = parseInt(Math.random() * 255)
          // 随机颜色
        let color = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`
        // 插入随机颜色
        bar.setAttribute('fill',color)
        // 设置x 的坐标
        bar.setAttribute('x',`${80 + (i +1 ) * xJg}`)
        // 设置Y的坐标    y轴 的起始Y坐标 相当于是 X轴的Y坐标  600 所以采用 600 减去柱状图的长度 等于  柱状图的  开始坐标Y
        bar.setAttribute('y',600 - data[i].value / 100 * yJg)
        bar.setAttribute('width',50)
        bar.setAttribute('height',data[i].value / 100 * yJg)
        // 这里如果使用   barDom.append 插入 bar 元素  无效， 具体原因不晓得
        barDom.innerHTML = barDom.innerHTML + bar.outerHTML + `<text x="${80 + (i +1 ) * xJg}" y='${600 - data[i].value / 100 * yJg - 10}'>${data[i].value} </text>`
    }

</script>
<style>
    .ceshi {
        width: 400px;
    }

    .axis {
        stroke: #000;
        stroke-width: 1px
    }

    .luj {
        fill: none;
        font-size: 50px;
        stroke: #FF0000;
        stroke-width: 2px;
        text-shadow: 0 0 20px #000;
    }
</style>

</html>