为什么我的 jQuery 进度条缺少一个部分？

Question

我有以下 HTML/jQuery 代码来显示包含 3 个部分的进度条，每个部分颜色不同：

<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" style="width: @(Model.TendersReceived[i].PointsTechnical)%;" title="@("Segment: 'Tech'" + Environment.NewLine + "Value: " + Model.TendersReceived[i].PointsTechnical)"></div>
    <div class="progress-bar progress-bar-success" role="progressbar" style="width: @(Model.TendersReceived[i].PointsManagement)%;" title="@("Segment: 'Man'" + Environment.NewLine + "Value: " + Model.TendersReceived[i].PointsManagement)"></div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width: @(Model.TendersReceived[i].PointsQuality)%;" title="@("Segment 'Qual'" + Environment.NewLine + "Value: " + Model.TendersReceived[i].PointsQuality)"></div>
    <div style="padding-top: 3px;">&nbsp;&nbsp;@Model.TendersReceived[i].PointsTotal.ToString("N2")</div>
</div>

现在栏呈现如下：

其中Blue对应PointsTechnical，值为44，则Orange对应PointsQuality，值为4.总数 71.5 包括 PointsManagement，其值为 23.5，应对应于 Green.

为什么我的进度条中缺少 Green 或 PointsManagement？

Answer 1

感谢@RoryMcCrossan 在评论中建议我检查 HTML 输出。我发现：

style="width: @(Model.TendersReceived[i].PointsManagement)%;"

呈现为：

style="width: 71,5%;"

用逗号作为小数点分隔符。当然 CSS 不理解逗号，所以我的进度条中任何有小数部分的部分都不会显示。

我将代码更改为阅读

style="width: @(Model.TendersReceived[i].PointsManagement.ToString(CultureInfo.InvariantCulture))%;"

进度 bar/graph 运行良好。

为什么我的 jQuery 进度条缺少一个部分？

Why is my jQuery Progress Bar Missing a Segment?

html

jquery

progress-bar