javascript - 如何在百分比宽度非常小的段之间渲染 1px 的装订线？

Question

我正在创建一个 UI 控件。它是一个条形图，根据输入显示彼此相对比例的彩色区域。一些要求是颜色之间有 1px 的间距，并且无论相对宽度有多小，每种颜色都必须至少显示 1px。

栏看起来像这样:

使用 pocketgrid documentation 描述的技术放置排水沟:

.threshold-container {
    height: 8px;

    $threshold-horiz-gutter: 1px;

    &.block-group {
        margin-left: -$threshold-horiz-gutter;
    }

    .threshold {
        height: 100%;
        min-width: 2px;

        &.block { 
            padding-left: $threshold-horiz-gutter; 
        }

        .colored-area {
            height: 100%;
            width: 100%;
        }

    }

}

这里有一个代码笔，它提供了一个工作示例:http://codepen.io/ghoti143/pen/eZNXVW

我面临的问题是，当任何一种颜色的相对比例足够小时，最后一个颜色区域换行到下一行，看起来像这样:

要重现此问题，请访问 codepen 元素并将其输入为阈值数组值:

[{"value":0,"color":"LightGreen"},
{"value":50,"color":"PaleGoldenrod"},
{"value":5000,"color":"LightSalmon"},
{"value":10000,"color":"Salmon"}]

本例中LightGreen区域的宽度样式为0.33333%。这相当于 0.495 像素，条形宽度为 150 像素。但是，由于要求始终为每种颜色显示至少 1px 的宽度，因此 LightGreen 区域占用了 2px 的宽度(1px 内容 + 1px 填充)。

感谢您提供的任何见解!

Answer 1

您可以使用 css calc 函数从每个部分的宽度计算中减去 1px 边距。 [例如] http://codepen.io/anon/pen/ZWGNVY

coloredAreas.push({
  color: thresholds[i].color,
  width: 'calc(' + width + '% - 1px)'
});