Javascript 在html表格单元格底部绘制一条线以反映相对大小的策略

我维护了一个小型Web应用程序，它有一个AngularJS前端。它用于在更大的框架中监控结果的状态。它显示数据表，并使用单元格颜色报告信息的其他维度

我正试图将更多信息“打包”到其中，以便有人能够理解系统中发生了什么，并且有理由假设此人将非常熟悉视图中的框架和视觉线索

每个单元格显示特定时间段内特定操作的成功/失败率数据。颜色用于指示当前速率在刻度上的位置

我想找到一种方法来显示每个时间段的操作调用的“数量”。每个单元格都有一个显示实际体积的工具提示，但我希望人们能够一眼看到这些操作的相对体积

因此，我设想简单地在数据单元的底部画一条黑线，从左侧到右侧，以反映这个时间段内此操作的相对体积，考虑到列中的所有值。有一条线穿过该小区的小区将是该时段呼叫量最大的小区。列中的所有其他单元格都有一条相对长度的线

那么，在这个HTML和AngularJS应用程序中，我需要哪些元素和策略来实现这一点？我“熟悉”Javascript，至少足以构建这个有点简单的AngularJS应用程序，尽管我主要是Java开发人员。我相信在Javascript中绘制线条需要使用画布。在HTML表格上画线是否实用

更新：

答案给了我所有我需要的工具，但没有直接解决这个问题，所以我只是添加了一个更新来显示我所做的

我将以下内容放在页面的顶层样式块中：

    .cell-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        background-color: black;
    }    

我在“td”定义的末尾添加了以下内容：

<div class="cell-bar" ng-style="{'width': computeBarWidth(name, 5)}"></div>

---

“

$scope.maxMap

”散列早先是在由间隔计时器调用的方法中计算的，该方法保存每个间隔的最大值。“

$scope.totalCount（）

”方法检索与单元格关联的总值。

根据您的注释，简单示例：

函数getColor（值）{ //从0到1的值 变量色调=（（1-值）*120.toString（10）； 返回“hsl（“+色调+”，100%，50%）”； } //这部分将在模板中简单地处理angularjs，就像

---

//根据您的评论，举个简单的例子：

函数getColor（值）{ //从0到1的值 变量色调=（（1-值）*120.toString（10）； 返回“hsl（“+色调+”，100%，50%）”； } //这部分将在模板中简单地处理angularjs，就像

---

//你不需要画布来画线条。它可以通过简单的HTML+CSS来完成。绝对底部定位的div，固定1px的高度和0-100%的宽度，做同样的工作。如果你把它作为一个答案发表一些详细说明，我会把它标记为答案。当然，宽度应该从javascript表达式中获得。你不需要画布来画线。它可以通过简单的HTML+CSS来完成。绝对底部定位的div，固定1px的高度和0-100%的宽度，做同样的工作。如果你把它作为一个答案发表一些详细说明，我会把它标记为答案。当然，宽度应该从javascript表达式中获得。实际上，单元格背景颜色用于其他用途。线路的长度是我想要改变的。@DavidM.Karr不知道您的angularjs控制器是什么样子，所以很难确切地告诉您该做什么。若要获得条的宽度，您必须知道可能的范围（最小值、最大值），将单元格值转换为百分比，并在模板中使用它，就像我的js注释中的n一样。实际上，单元格背景颜色用于其他用途。线路的长度是我想要改变的。@DavidM.Karr不知道您的angularjs控制器是什么样子，所以很难确切地告诉您该做什么。若要获得条的宽度，您必须知道可能的范围（最小值、最大值），将单元格值转换为百分比，并在模板中使用它，如我的js注释中的n。

    $scope.computeBarWidth  =
        function(name, interval) {
            if ($scope.maxMap[interval]) {
                return (Math.round($scope.getTotalCount(name, interval) / $scope.maxMap[interval] * 100)) + "%";
            }
        };