HTML+JS+Bootstrap数据可视化教程

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML+JS+Bootstrap销售数据可视化教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

本教程旨在指导读者如何使用HTML、JavaScript和Bootstrap构建一个交互式网页，用于输入并分析汽车经销商的季度销售数据。文章详细讲解了如何通过JavaScript收集表单数据，并计算每季度总销售额、每位销售代表的最高单季度销售额，以及每位销售代表的平均销售额，最终将结果动态展示在Bootstrap表格中。教程重点阐述了数据处理逻辑，特别是修正了计算销售代表平均销售额时的常见错误，确保数据准确无误地呈现。

1. 概述与技术栈

本教程将引导您创建一个功能完善的销售数据管理页面。用户可以输入三位销售代表的四个季度销售额，系统将自动计算并显示以下统计结果：

• 每个季度的总销售额。
• 每位销售代表的最高单季度销售额。
• 每位销售代表的平均销售额。

我们将主要使用以下技术：

• HTML5: 构建页面结构和表单元素。
• CSS3 (Bootstrap 3.4.1): 美化页面布局，提供响应式表格样式。
• JavaScript (原生JS & jQuery 3.6.4): 处理用户输入、执行数据计算和动态更新页面内容。

2. 页面结构设计 (HTML)

页面的核心是一个Bootstrap表格，用于展示销售数据和计算结果。每个销售代表占据一行，包含四个季度的输入框，以及两个只读的输出框用于显示最高销售额和平均销售额。表格底部增加一行，用于显示每个季度的总销售额。

    
    
    
    
    


    

    
 点击此处查看描述 
    

        
作为一家汽车经销商，我们将买家与数千个二手车网站匹配，让您无需搜索。

        从您的第一辆车到第十五辆，我们希望让买卖汽车成为您期待的事情。我们正在采用数据驱动和以用户为中心的方法，创造新的、更好的买卖汽车方式。
    

    

        
季度销售额
        

            

                

                    
经销商
                    
销售代表
                    
第一季度
                    
第二季度
                    
第三季度
                    
第四季度
                    
代表最高销售额
                    
代表平均销售额
                
            
            

                

                    
Carmax in Laurel, MD
                    
John Malcavech
                    
<input type="number" name="s1[]">
                    
<input type="number" name="s1[]">
                    
<input type="number" name="s1[]">
                    
<input type="number" name="s1[]">
                    
<input type="text" id="high1" readonly>
                    
<input type="text" id="avg1" readonly>
                
                

                    
MERCEDES-BENZ OF SILVER SPRING
                    
Moses Aran
                    
<input type="number" name="s2[]">
                    
<input type="number" name="s2[]">
                    
<input type="number" name="number" name="s2[]">
                    
<input type="number" name="s2[]">
                    
<input type="text" id="high2" readonly>
                    
<input type="text" id="avg2" readonly>
                
                

                    
Hertz Car Sales Baltimore
                    
Rachet C. Clinton
                    
<input type="number" name="s3[]">
                    
<input type="number" name="s3[]">
                    
<input type="number" name="s3[]">
                    
<input type="number" name="s3[]">
                    
<input type="text" id="high3" readonly>
                    
<input type="text" id="avg3" readonly>
                
                

                    
总销售额
                    
-----
                    
<input type="text" name="total[]" readonly>
                    
<input type="text" name="total[]" readonly>
                    
<input type="text" name="total[]" readonly>
                    
<input type="text" name="total[]" readonly>
                    
-----
                    
-----
                
            
        
        

            计算
        
    
    

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 函数是整个应用的核心，负责数据收集、计算和结果展示。

JavaScript逻辑详解与修正：

1. 数据收集 (sales 二维数组):

   • 通过 document.getElementsByName('sX[]') 获取每个销售代表的所有季度销售额输入框元素集合。
   • 遍历这些集合，使用 push() 方法将每个输入框的值添加到对应的 sales 二维数组的子数组中。
   • 注意： 输入框的值是字符串，在进行数学运算前必须使用 parseInt() 或 parseFloat() 转换为数字。为了健壮性，建议使用 parseInt(value || 0) 来处理空字符串或非数字输入，将其视为0。

2. 计算每季度总销售额:

   • 外层循环遍历 sales[0].length（即季度数），代表按列（季度）进行统计。
   • 内层循环遍历 sales.length（即销售代表数），累加当前季度所有代表的销售额。
   • 将结果更新到 name="total[]" 的输入框中。

3. 找出每位销售代表的最高单季度销售额:

   • 外层循环遍历 sales.length（销售代表数），代表按行（销售代表）进行统计。
   • 在每个销售代表的循环开始时，将 highestSaleForRep 初始化为该代表第一个季度的销售额。
   • 内层循环遍历 sales[0].length（季度数），比较当前代表每个季度的销售额，更新 highestSaleForRep。
   • 通过 id="highX" 定位到对应的只读输入框，更新其值。

4. 计算每位销售代表的平均销售额 (核心修正):

   • 原始问题: 原始代码中计算平均值的内层循环条件是 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文件。