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

Ag grid cell linear gradient color based on max and min value

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

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

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

我在这里放了一个 Plunker 作为演示：https://plnkr.co/edit/WVCvkvCFhXB6tiWH。这些值已打乱顺序，但您可以单击 header 列对其进行排序。它是用 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. 最后，returns 具有要应用于单元格的样式的 object - 在本例中为 backgroundColor:

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

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