【HTML 绘图】分组柱状图

已于 2025-03-24 17:10:10 修改
阅读量708 收藏 14
点赞数 24
文章标签： html css 前端
于 2025-03-24 17:08:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45836408/article/details/146480586
版权

html 文件来绘图非常方便，便于传播和交互。分享一个小代码，数据可调，直接在本地双击即可使用，图片可下载。代码直接附在后面了，复制粘贴进 txt 改尾缀为.html，无需付费下载。
界面
分组柱状图-各科目成绩分布

导入

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩统计柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js  "></script>
    <style>
        body {
            font-family: 'SimSun', '宋体', serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
        }
        .container {
            max-width: 1000px;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 24px;
        }
        .chart-container {
            position: relative;
            width: 900px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        canvas {
            width: 100% !important;
            height: 100% !important;
        }
        .controls {
            margin-top: 20px;
            padding: 0 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 8px;
            font-family: 'SimSun', '宋体', serif;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        .form-row .form-group {
            flex: 1;
            min-width: 200px;
            margin-right: 15px;
        }
        .btn-group {
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .btn {
            padding: 10px 20px;
            margin: 0 5px;
            font-family: 'SimSun', '宋体', serif;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        .btn-primary:hover {
            background-color: #45a049;
        }
        .btn-secondary {
            background-color: #607D8B;
            color: white;
        }
        .btn-secondary:hover {
            background-color: #506572;
        }
        .axis-labels {
            display: flex;
            width: 100%;
            margin-bottom: 10px;
        }
        .axis-labels input {
            font-family: 'SimSun', '宋体', serif;
            font-size: 14px;
            padding: 5px;
            margin: 0 10px;
            width: 30%;
        }
        .axis-labels label {
            font-size: 14px;
            margin-right: 10px;
        }
        .adjust-btns {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .adjust-group {
            margin: 0 20px;
            text-align: center;
        }
        .adjust-group label {
            display: block;
            margin-bottom: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>学生成绩统计柱状图</h1>
        
        <div class="controls">
            <div class="form-group">
                <label for="chart-title">图表标题</label>
                <input type="text" id="chart-title" value="各科目成绩分布情况">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="course-names">课程名称（用逗号分隔）</label>
                    <input type="text" id="course-names" value="血管走形, 循环路径, 流体力学, 血压成因, 血压影响因素, 测量血压">
                </div>
                <div class="form-group">
                    <label for="grade-labels">成绩等级（用逗号分隔）</label>
                    <input type="text" id="grade-labels" value="不合格, 合格, 良好, 优秀">
                </div>
            </div>
            
            <div class="form-group">
                <label for="data-values">成绩分布数据（每门课程的数据用分号分隔，等级间用逗号分隔）</label>
                <input type="text" id="data-values" value="1, 3, 8, 12; 2, 4, 9, 9; 1, 4, 10, 9; 2, 5, 10, 7; 3, 6, 11, 4; 2, 5, 10, 7">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="chart-width">图表宽度（px）</label>
                    <input type="number" id="chart-width" value="900" min="300" max="1200">
                </div>
                <div class="form-group">
                    <label for="chart-height">图表高度（px）</label>
                    <input type="number" id="chart-height" value="500" min="200" max="800">
                </div>
            </div>
            
            <div class="axis-labels">
                <label for="x-label">X轴标签：</label>
                <input type="text" id="x-label" value="科目">
                <label for="y-label">Y轴标签：</label>
                <input type="text" id="y-label" value="学生人数">
            </div>
            
            <div class="adjust-btns">
                
                <div class="adjust-group">
                    <label>字体大小</label>
                    <button class="btn btn-secondary" id="decrease-font-size">-</button>
                    <button class="btn btn-secondary" id="increase-font-size">+</button>
                </div>
                
                <div class="adjust-group">
                    <label>坐标轴线条</label>
                    <button class="btn btn-secondary" id="decrease-grid-width">-</button>
                    <button class="btn btn-secondary" id="increase-grid-width">+</button>
                </div>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-primary" id="generate-btn">生成图表</button>
                <button class="btn btn-secondary" id="download-btn">下载图表</button>
            </div>
        </div>
        
        <div class="chart-container">
            <canvas id="scoreChart"></canvas>
        </div>
    </div>

    <script>
        let chart = null;
        let fontSize = 16; // 初始字体大小
        let gridLineWidth = 1; // 初始坐标轴线条粗细

        // 等待页面加载完成后再执行图表绘制代码
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('scoreChart').getContext('2d');
            
            // 初始化图表
            initChart();
            
            // 绑定生成图表按钮事件
            document.getElementById('generate-btn').addEventListener('click', function() {
                initChart();
            });
            
            // 绑定下载图表按钮事件
            document.getElementById('download-btn').addEventListener('click', function() {
                if (chart) {
                    // 创建一个链接元素
                    const link = document.createElement('a');
                    // 设置下载的文件名
                    link.download = document.getElementById('chart-title').value + '.png';
                    // 将图表转换为Base64编码的图片数据
                    link.href = chart.toBase64Image();
                    // 模拟点击链接
                    link.click();
                }
            });
            
            // 调整图表容器大小
            document.getElementById('chart-width').addEventListener('input', function() {
                document.querySelector('.chart-container').style.width = this.value + 'px';
            });
            
            document.getElementById('chart-height').addEventListener('input', function() {
                document.querySelector('.chart-container').style.height = this.value + 'px';
            });
            
            // 字体大小调整按钮
            document.getElementById('increase-font-size').addEventListener('click', function() {
                fontSize += 2;
                initChart();
            });
            
            document.getElementById('decrease-font-size').addEventListener('click', function() {
                fontSize -= 2;
                initChart();
            });
            
            // 坐标轴线条粗细调整按钮
            document.getElementById('increase-grid-width').addEventListener('click', function() {
                gridLineWidth = Math.min(gridLineWidth + 1, 5);
                initChart();
            });
            
            document.getElementById('decrease-grid-width').addEventListener('click', function() {
                gridLineWidth = Math.max(gridLineWidth - 1, 0);
                initChart();
            });
            
            function initChart() {
                // 销毁之前的图表
                if (chart) {
                    chart.destroy();
                }
                
                const ctx = document.getElementById('scoreChart').getContext('2d');
                
                // 获取用户输入的数据
                const chartTitle = document.getElementById('chart-title').value;
                const courseNames = document.getElementById('course-names').value.split(',').map(name => name.trim());
                const gradeLabels = document.getElementById('grade-labels').value.split(',').map(label => label.trim());
                const dataValues = document.getElementById('data-values').value.split(';').map(row => row.trim().split(',').map(Number));
                const xLabel = document.getElementById('x-label').value;
                const yLabel = document.getElementById('y-label').value;
                
                // 定义成绩等级对应的颜色，推荐的配色方案
                const gradeColors = [
                    'rgba(229, 53, 40, 0.8)', // 不合格 - 红色
                    'rgba(240, 151, 57, 0.8)', // 合格 - 橙色
                    'rgba(85, 183, 230, 0.8)', // 良好 - 浅蓝
                    'rgba(25, 62, 143, 0.8)'  // 优秀 - 深蓝
                ];
                
                // 准备图表数据集
                const datasets = gradeLabels.map((label, index) => ({
                    label: label,
                    data: dataValues.map(row => row[index]),
                    backgroundColor: gradeColors[index],
                    borderColor: gradeColors[index].replace('0.8', '1'),
                    borderWidth: 1
                }));
                
                // 创建柱状图
                chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: courseNames,
                        datasets: datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: {
                                display: true,
                                text: chartTitle,
                                font: {
                                    size: fontSize + 2
                                }
                            },
                            legend: {
                                position: 'top',
                                labels: {
                                    font: {
                                        size: fontSize
                                    }
                                }
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: yLabel,
                                    font: {
                                        size: fontSize + 2
                                    }
                                },
                                ticks: {
                                    font: {
                                        size: fontSize
                                    }
                                },
                                grid: {
                                    lineWidth: gridLineWidth
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: xLabel,
                                    font: {
                                        size: fontSize + 2
                                    }
                                },
                                ticks: {
                                    font: {
                                        size: fontSize
                                    }
                                },
                                grid: {
                                    lineWidth: gridLineWidth
                                }
                            }
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
鹿茸Lucky
关注
HTML5柱状图表 可合并多张图表的数据
08-23
之前我们分享过好几款不错的HTML5柱状图表了，像这款HTML5/CSS3水平柱状图表，非常简单实用的图表。今天我们要再来分享一款HTML5柱状图表，这款图表插件可以将多张图表的数据合并成一张图表显示，在图表数据合并过程中产生融入的动画，挺不错的。
html5自己写的柱状图
03-09
这是一个简单的用canvas处理对的柱状图。改了数据可以直接使用
html实现画柱状图、饼图的插件
01-07
里面有很多实例，主要针对html画柱状图、饼图的插件，展示效果很不错。
HTML常用图表（柱状图，折线图，饼图，关联图，表格）的绘制
数据挖掘+大数据研发+算法学习
05-07 1万+
一：柱状图/折线图的绘制 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width:80%;height:400px;margin: 0 a
html5制作柱形图
12-18
柱形图，可以制作多柱形图，可以制作饼图，折线图等等多种图形
html 柱状图
HumorousGhost
09-13 8602
HTML 柱状图绘制
HTML 画柱状图
weixin_30756499的博客
11-23 2706
var totalData=[{name:"考研",num:35},{name:"工作",num:86}]; var schollData=[{name:"西南科技大学",num:15},{name:"电子科技大学",num:8},{name:"四川大学",num:4},{name:"西安电子科技大学",num:8}]; var companyData=[{name:...
在html中使用Echarts.js绘制柱状图
weixin_45092437的博客
11-29 4195
1. 横坐标为作业名称，作业名称一行6个字符，最多两行，超出显示省略号。 2. 纵坐标为百分比数字，分为5个刻度，且每个刻度在坐标系中都有延伸虚线。 3. 柱状图默认为半透明的蓝色，鼠标hover之后变色，并以浮窗的形式展示该条数据的相关信息。 4. 当数据量超过10条时，x轴下面有横向滚动条，默认每屏展示10条数据，数据之间的间距相等，可以通过滚动条来滚动查看前后的数据。
使用html画简单的柱状图
12-30 2906
由于本人写完之后没有进行整理，所以里边代码结构不是很合理，请大家见谅，另外里边的画图的坐标，也是一边画一边调整的，仅供大家参考 <!DOCTYPE html>     <meta charset="utf-8">     绘制柱状图 <div style="margin: 0 auto; width:800px; height:400px">     <canvas id="can1"
【自定义 html 绘图-分组柱状图】
最新发布
03-24
【自定义 html 绘图-分组柱状图】
vml柱状图 vml html jquery
01-11
vml柱状图 vml html jquery
Python动态柱状图案例——人口变化动态图
05-31
在本案例中，我们主要探讨如何使用Python编程语言，特别是数据可视化库matplotlib，来创建一个动态的柱状图，展示1959年至2018年期间各国人口的变化情况。我们将通过分析提供的文件和标签来揭示这个过程的关键知识点...
R 语言科研绘图第 12 期 --- 柱状图-分组
🧑‍🎓 博士研究生在读 🔬 分享生物信息学、神经生物学方面的知识 💬 合作请在后台留言
12-30 745
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。颜色的选择往往是一件让人特别纠结的事情，这里我们直接使用。为了便于使用，本系列文章介绍的所有绘图都已收录到了。R 语言科研配色工具 --- sciRcolor。R 语言科研绘图模板 --- sciRplot。为了解决 R 语言中科研绘图的问题，我推出了。种绘图代码，按照图形类型进行分类，包含。接下来我们导入绘图用到的数据，在。
R语言ggplot2绘制分组箱型图和分组柱状图
热门推荐
7元的博客
07-23 7万+
需求 论文中常见的分组箱型图和分组条形图可以直观的比较方法的效果，以一个图显示多个方法在多个数据集上的AUC或AUPR，包含2个分类变量和1个连续变量。 分组条形图 数据 分组箱型图 ...
科研绘图系列：R语言绘制差异分析双侧柱状图（grouped barplot）
专注生信领域
11-08 506
科研绘图系列：R语言差异分析双侧柱状图（grouped barplot）
Html+Css柱状图
m0_63615119的博客
03-26 490
Html+Css柱状图
html原生echart柱状图
骨子里的偏爱
12-01 788
【代码】html原生echart柱状图。
php柱状图html代码,使用html实现简单的柱状图效果
weixin_39930748的博客
03-16 296
由于本人写完之后没有进行整理，所以里边代码结构不是很合理，请大家见谅，另外里边的画图的坐标，也是一边画一边调整的，仅供大家参考效果图：绘制柱状图会员数的变化公元2003年2004年2005年2006年2007年2008年2009年会员数2303604596548349561085var can1=document.getElementByIdx_x_x("can1");var cxt=can1.g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值