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

Question

如果您查看下表，我将颜色代码作为渐变(从最小值到最大值的深绿色到深红色)，这是 Excel 格式中可用的功能。如何在 Ag 网格中实现这一目标？

Answer 1

您可以使用 cellStyle更改单元格样式的函数，如 here 所述.
现在，为了在单元格之间应用渐变效果，我将假设您希望设置样式的列的最小值和最大值是已知的，并且这些值的类型是数字，而不是字符串。
我在这里放了一个 Plunker 作为演示:https://plnkr.co/edit/WVCvkvCFhXB6tiWH .这些值会随机排列，但您可以单击列标题对其进行排序。它是用 React 编写的，因此您可能需要根据您使用的库或框架进行一些更改。这个例子的要点是:

找到要设置样式的列的最小值和最大值。

在要设置样式的列中添加一个函数:

计算 weight这告诉我们离最大值有多近。 0 表示该值是可能的最小值，1 表示该值是可能的最高值。

将权重应用于 3 个 RGB channel 中的每一个，如下所示: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;

最后，返回一个对象，该对象具有要应用于单元格的样式 - 在本例中 backgroundColor :

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

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