Rails 中数字的 Excel 样式条件格式

Question

我正在编写一个销售应用程序，其中的项目具有范围从 0 到 100 (%) 的 : savings 属性。我希望显示该属性的单元格的背景颜色能够像在 Excel 中那样有条件地着色。

Excel条件格式的基本思想是它计算出您正在处理的范围（0-100），当您为每个极端分配一种颜色时，它会自动计算出项目之间的颜色应该是什么。因此，100 可能是亮绿色，80 淡绿色，60 黄色，40 橙色，20 淡红色，0 亮红色。等等

我想我可以弄清楚如何以详尽的方式做到这一点——只需创建一个助手，为 0 到 100 之间的每个整数可能性分配一个具有不同十六进制背景颜色的 CSS 类。但这似乎效率非常低，我'我祈祷某种 Rails 技术、宝石或现有的助手可以让这一切变得更容易、更优雅。

有什么想法吗？

Answer 1

我编写了一个 jQuery 插件来执行此操作：jQuery Hottie。我用过很多次了。似乎是在 Rails 中实现此操作的一个很好的替代方案。

JSFiddle 示例.

传入自定义颜色数组以将高/中/低值映射到特定颜色非常简单。

Answer 2

我知道这是一个老问题，但现在仅使用 CSS 就可以实现：

let containers = document.querySelectorAll('.autofill');

for (let container of containers) {
  let min = Number.MAX_SAFE_INTEGER;
  let max = -Number.MAX_SAFE_INTEGER;
  const cells = container.querySelectorAll('.cell');
  for (let cell of cells) {
    let v = cell.innerText/1;
    min = Math.min(v, min);
    max = Math.max(v, max);
    cell.style.setProperty('--value', v);
  }
  container.style.setProperty('--min', min);
  container.style.setProperty('--max', max);
}

.outer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 50rem;
}

.container {
  /** Required for colour **/
  --min: 0;
  --max: 10;
  --incs: oklch;
  --value: 0.5;
  --high-color: #F8696B;
  --middle-color: #FFEB84;
  --low-color: #63BE7B;
  
  /** Other styling **/
  display: inline-flex;
  background-color: #fff;
  padding: 1rem;
  border: 1px solid grey;
  justify-content: space-evenly;
}

.cell {
  /** Required for colour **/
  --normed: calc(100% * (var(--value) - var(--min))/(var(--max) - var(--min)));
  --n1: calc((var(--normed) - 50%) * 2);
  --n2: calc(var(--normed)*2);
  background-color: color-mix(
    in var(--incs),
    color-mix(in var(--incs), var(--high-color) var(--n1), var(--middle-color)) var(--normed),
    color-mix(in var(--incs), var(--middle-color) var(--n2), var(--low-color))
  );
  
  /** Other styling **/
  padding: 1rem;
  text-align: center;
}

<div class="outer">
  <div class="container autofill">
    <div class="cell">0</div>
    <div class="cell">2</div>
    <div class="cell">4</div>
    <div class="cell">6</div>
    <div class="cell">8</div>
    <div class="cell">10</div>
    <div class="cell">12</div>
    <div class="cell">14</div>
    <div class="cell">16</div>
    <div class="cell">18</div>
    <div class="cell">20</div>
  </div>
  <div class="container autofill">
    <div class="cell">0</div>
    <div class="cell">4</div>
    <div class="cell">2</div>
    <div class="cell">5</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">14</div>
    <div class="cell">16</div>
    <div class="cell">17</div>
    <div class="cell">19</div>
    <div class="cell">20</div>
  </div>
  <div class="container autofill">
    <div class="cell">20</div>
    <div class="cell">5</div>
    <div class="cell">20</div>
    <div class="cell">0</div>
    <div class="cell">10</div>
    <div class="cell">1</div>
    <div class="cell">-5</div>
    <div class="cell">4</div>
    <div class="cell">10</div>
    <div class="cell">9</div>
    <div class="cell">8</div>
  </div>
</div>