基于最大值和最小值的Ag网格单元线性渐变颜色

Question

如果您查看下表，我将颜色代码设置为渐变（从最小值到最大值的深绿色到深红色），这是 excel 格式中可用的功能。如何在 Ag 网格中实现这一点？

Answer 1

您可以使用cellStyle 函数来更改单元格的样式，如here 所述。

现在，为了在单元格之间应用渐变效果，我假设您希望设置样式的列的最小值和最大值是已知的，并且这些值的类型是数字，而不是字符串。

我在这里放了一个 Plunker 作为演示：https://plnkr.co/edit/WVCvkvCFhXB6tiWH。这些值是随机排列的，但您可以单击列标题对它们进行排序。它是用 React 编写的，因此您可能需要根据您使用的库或框架进行一些更改。这个例子的要点是：

1. 找到要设置样式的列的最小值和最大值。
2. 在要设置样式的列中添加一个函数：

   1. 计算weight，它告诉我们距离最大值有多近。 0 表示该值尽可能小，1 表示该值尽可能高。

   2. 对 3 个 RGB 通道中的每一个应用权重，如下所示：

      weight * finalChannelValue + (1 - weight) * initialChannelValue

      例如：如果你想用rgb(198, 57, 9)为最小值的背景着色，用rgb(36, 114, 76)为最大值着色，这样写：

      let red = weight * 36 + (1 - weight) * 198;
      let green = weight * 114 + (1 - weight) * 57;
      let blue = weight * 76 + (1 - weight) * 9;
      

   3. 最后，返回一个对象，其中包含要应用于单元格的样式 - 在本例中为 backgroundColor：

      return { backgroundColor: `rgb(${red}, ${green}, ${blue})` };
      

再次假设单元格中的数字确实是数字，而不是字符串。如果它们是字符串，您可能想先尝试parseInt() 或parseFloat() 将它们转换为数字。