HTML+JS+Bootstrap数据可视化教程
时间：2025-08-14 14:51:36 401浏览 收藏
目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML+JS+Bootstrap销售数据可视化教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~
1. 概述与技术栈
本教程将引导您创建一个功能完善的销售数据管理页面。用户可以输入三位销售代表的四个季度销售额，系统将自动计算并显示以下统计结果：
- 每个季度的总销售额。
- 每位销售代表的最高单季度销售额。
- 每位销售代表的平均销售额。
我们将主要使用以下技术：
- HTML5: 构建页面结构和表单元素。
- CSS3 (Bootstrap 3.4.1): 美化页面布局，提供响应式表格样式。
- JavaScript (原生JS & jQuery 3.6.4): 处理用户输入、执行数据计算和动态更新页面内容。
2. 页面结构设计 (HTML)
页面的核心是一个Bootstrap表格，用于展示销售数据和计算结果。每个销售代表占据一行，包含四个季度的输入框，以及两个只读的输出框用于显示最高销售额和平均销售额。表格底部增加一行，用于显示每个季度的总销售额。
<!DOCTYPE html>
<html>
<head>
<title>季度销售数据分析</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: red;
border: solid 1px white;
color: white; /* Added for better visibility */
}
#panel {
padding: 50px;
display: none;
}
#logo {
text-align: left;
padding: 50px;
}
.center {
margin: auto;
width: 60%;
border: none;
padding: 10px;
text-align: center; /* Center the button */
}
body {
background-color: black;
color: white; /* Default text color for body */
}
.table th, .table td {
color: white; /* Ensure table text is white */
}
.table input {
color: red; /* Input field text color */
}
</style>
</head>
<body>
<div id="logo"><img src="logo/33574391656_af96565fed.jpg" alt="Autolist logo" width="350" height="133"></div>
<div id="flip"><span style="font-weight:bold;"> 点击此处查看描述 </span></div>
<div id="panel">
<p>作为一家汽车经销商，我们将买家与数千个二手车网站匹配，让您无需搜索。<br>
从您的第一辆车到第十五辆，我们希望让买卖汽车成为您期待的事情。我们正在采用数据驱动和以用户为中心的方法，创造新的、更好的买卖汽车方式。</p>
</div>
<div class="container">
<h2><strong>季度销售额</strong></h2>
<table class="table table-bordered">
<thead>
<tr>
<th>经销商</th>
<th>销售代表</th>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
<th>代表最高销售额</th>
<th>代表平均销售额</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carmax in Laurel, MD</td>
<td>John Malcavech</td>
<td><input type="number" name="s1[]"></td>
<td><input type="number" name="s1[]"></td>
<td><input type="number" name="s1[]"></td>
<td><input type="number" name="s1[]"></td>
<td><input type="text" id="high1" readonly></td>
<td><input type="text" id="avg1" readonly></td>
</tr>
<tr>
<td>MERCEDES-BENZ OF SILVER SPRING</td>
<td>Moses Aran</td>
<td><input type="number" name="s2[]"></td>
<td><input type="number" name="s2[]"></td>
<td><input type="number" name="number" name="s2[]"></td>
<td><input type="number" name="s2[]"></td>
<td><input type="text" id="high2" readonly></td>
<td><input type="text" id="avg2" readonly></td>
</tr>
<tr>
<td>Hertz Car Sales Baltimore</td>
<td>Rachet C. Clinton</td>
<td><input type="number" name="s3[]"></td>
<td><input type="number" name="s3[]"></td>
<td><input type="number" name="s3[]"></td>
<td><input type="number" name="s3[]"></td>
<td><input type="text" id="high3" readonly></td>
<td><input type="text" id="avg3" readonly></td>
</tr>
<tr>
<td>总销售额</td>
<td>-----</td>
<td><input type="text" name="total[]" readonly></td>
<td><input type="text" name="total[]" readonly></td>
<td><input type="text" name="total[]" readonly></td>
<td><input type="text" name="total[]" readonly></td>
<td>-----</td>
<td>-----</td>
</tr>
</tbody>
</table>
<div class="center">
<button type="button" onclick="calculate()">计算</button>
</div>
</div>
<script>
// JavaScript will be placed here
</script>
</body>
</html>HTML结构注意事项：
- CDN引用: 确保正确引入jQuery和Bootstrap的CSS/JS文件。这里使用的是Bootstrap 3.4.1。
- 输入框命名: 季度销售额输入框使用 name="s1[]"、name="s2[]"、name="s3[]" 的形式，方便JavaScript通过 document.getElementsByName() 获取同组数据。
- 只读输出框: 最高销售额和平均销售额的输出框使用 id="high1"、id="avg1" 等唯一ID，便于JavaScript直接定位并更新值。readonly 属性确保用户无法修改这些计算结果。
- 计算按钮: 一个简单的 button 元素，通过 onclick="calculate()" 调用JavaScript函数。
3. JavaScript核心逻辑 (calculate函数)
calculate 函数是整个应用的核心，负责数据收集、计算和结果展示。
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideDown("slow");
});
});
function calculate() {
// 1. 数据收集：将输入框中的销售数据存储到二维数组
var sales = new Array(3); // 3行，对应3位销售代表
sales[0] = []; // John Malcavech
sales[1] = []; // Moses Aran
sales[2] = []; // Rachet C. Clinton
// 获取并填充John Malcavech的销售数据
var s1 = document.getElementsByName('s1[]');
for (var i = 0; i < s1.length; i++) {
sales[0].push(s1[i].value);
}
// 获取并填充Moses Aran的销售数据
var s2 = document.getElementsByName('s2[]');
for (var i = 0; i < s2.length; i++) {
sales[1].push(s2[i].value);
}
// 获取并填充Rachet C. Clinton的销售数据
var s3 = document.getElementsByName('s3[]');
for (var i = 0; i < s3.length; i++) {
sales[2].push(s3[i].value);
}
// 2. 计算每季度的总销售额
var totalSalesPerQuarter = []; // 存储每个季度的总销售额
var overallTotalSales = 0; // 所有季度的总销售额
// 遍历列（季度）
for (var col = 0; col < sales[0].length; ++col) {
var currentQuarterTotal = 0; // 当前季度的总销售额
// 遍历行（销售代表）
for (var row = 0; row < sales.length; ++row) {
currentQuarterTotal += parseInt(sales[row][col] || 0); // 确保转换为数字，处理空值
overallTotalSales += parseInt(sales[row][col] || 0);
}
totalSalesPerQuarter.push(currentQuarterTotal);
// 将结果显示在表格底部对应的“总销售额”输入框中
document.getElementsByName('total[]')[col].value = currentQuarterTotal;
}
// console.log("所有季度总销售额: " + overallTotalSales); // 可以用console.log代替alert
// 3. 找出每位销售代表的最高单季度销售额
// 遍历行（销售代表）
for (var row = 0; row < sales.length; ++row) {
// 初始化当前销售代表的最高销售额为第一个季度的值
var highestSaleForRep = parseInt(sales[row][0] || 0);
// 遍历列（季度）
for (var col = 0; col < sales[0].length; ++col) {
var currentSale = parseInt(sales[row][col] || 0);
if (currentSale > highestSaleForRep) {
highestSaleForRep = currentSale;
}
}
// 将结果显示在对应的“代表最高销售额”输入框中
var highId = "high" + (row + 1);
document.getElementById(highId).value = highestSaleForRep;
}
// 4. 计算每位销售代表的平均销售额 (修正后的逻辑)
// 遍历行（销售代表）
for (var row = 0; row < sales.length; ++row) {
var totalSalesForRep = 0; // 当前销售代表的总销售额
// 遍历列（季度）以累加当前代表的所有季度销售额
// 关键修正：循环条件应为 sales[0].length (即季度数)
for (var col = 0; col < sales[0].length; ++col) {
totalSalesForRep += parseInt(sales[row][col] || 0);
}
// 在内层循环结束后，计算平均值
var numberOfQuarters = sales[0].length; // 获取季度数量，此处为4
var averageSalesForRep = totalSalesForRep / numberOfQuarters;
// 将结果显示在对应的“代表平均销售额”输入框中
var avgId = "avg" + (row + 1); // 构建正确的ID，如 "avg1", "avg2", "avg3"
document.getElementById(avgId).value = averageSalesForRep.toFixed(2); // 保留两位小数
}
}
</script>JavaScript逻辑详解与修正：
数据收集 (sales 二维数组):
- 通过 document.getElementsByName('sX[]') 获取每个销售代表的所有季度销售额输入框元素集合。
- 遍历这些集合，使用 push() 方法将每个输入框的值添加到对应的 sales 二维数组的子数组中。
- 注意： 输入框的值是字符串，在进行数学运算前必须使用 parseInt() 或 parseFloat() 转换为数字。为了健壮性，建议使用 parseInt(value || 0) 来处理空字符串或非数字输入，将其视为0。
计算每季度总销售额:
- 外层循环遍历 sales[0].length（即季度数），代表按列（季度）进行统计。
- 内层循环遍历 sales.length（即销售代表数），累加当前季度所有代表的销售额。
- 将结果更新到 name="total[]" 的输入框中。
找出每位销售代表的最高单季度销售额:
- 外层循环遍历 sales.length（销售代表数），代表按行（销售代表）进行统计。
- 在每个销售代表的循环开始时，将 highestSaleForRep 初始化为该代表第一个季度的销售额。
- 内层循环遍历 sales[0].length（季度数），比较当前代表每个季度的销售额，更新 highestSaleForRep。
- 通过 id="highX" 定位到对应的只读输入框，更新其值。
计算每位销售代表的平均销售额 (核心修正):
- 原始问题: 原始代码中计算平均值的内层循环条件是 sales.length[0]，这是一个语法错误，sales.length 是数组的长度（行数），它没有索引 [0]。正确的应该是 sales[0].length，表示第一行的长度，也就是季度的数量（列数）。
- 修正后的逻辑:
- 外层循环 for (var row = 0; row < sales.length; ++row)：遍历每一位销售代表。
- 内层循环 for (var col = 0; col < sales[0].length; ++col)：遍历当前销售代表的每个季度销售额，累加到 totalSalesForRep。
- 关键点： totalSalesForRep 的累加必须在内层循环中完成。而平均值的计算 (averageSalesForRep = totalSalesForRep / numberOfQuarters) 必须在内层循环结束后，即外层循环的每次迭代中进行。
- 将计算出的平均值赋值给正确的元素ID ("avg" + (row + 1))。toFixed(2) 用于将结果格式化为两位小数，提高可读性。
- 错误示例分析（原代码片段）：
//Finding the average sale of each representative for (var row = 0; row < sales.length; ++row) { var totalperRep = 0; //reset for (var col = 0; col < sales.length[0]; ++col) // 错误：sales.length[0] { totalperRep += parseInt(sales[row][col]); var saleRow = "avg" + (row + 1); // 错误：变量在内层循环中反复声明且赋值 } document.getElementById(saleRow).value = totalperRep; // 错误：这里是总和，不是平均 var average = totalperRep / sales.length[0]; // 错误：分母 document.getElementById(average).value = totalperRep; // 错误：用数字作为ID }- sales.length[0]：语法错误，导致无法正确获取列数。
- var saleRow = "avg"+(row+1); 在内层循环中，每次迭代都会重新声明并赋值，但其作用域是整个外层循环，且其值在内层循环结束时才稳定，但赋值操作应该在内层循环结束后进行。
- document.getElementById(saleRow).value = totalperRep;：这一行将总和而不是平均值赋给了 saleRow 对应的元素。
- document.getElementById(average).value = totalperRep;：这里试图将计算出的 average 值（一个数字）作为HTML元素的ID来获取元素，这是不正确的。HTML元素的ID必须是字符串。
4. 样式和UI交互 (CSS & jQuery)
- CSS: 主要通过Bootstrap的 table 和 table-bordered 类来美化表格。自定义CSS用于设置背景色、文字颜色以及 panel 和 flip 元素的样式。
- jQuery: 用于实现点击 flip 元素时，panel 元素滑动显示或隐藏的动画效果。
5. 完整代码示例
将上述HTML、CSS和JavaScript片段组合起来，即可得到一个完整的、可运行的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>季度销售数据分析</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: red;
border: solid 1px white;
color: white;
}
#panel {
padding文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML+JS+Bootstrap数据可视化教程》文章吧，也可关注golang学习网公众号了解相关技术文章。
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
319 收藏
-
394 收藏
-
258 收藏
-
484 收藏
-
402 收藏
-
334 收藏
-
460 收藏
-
160 收藏
-
189 收藏
-
140 收藏
-
310 收藏
-
275 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 485次学习