Ag-grid 條件格式

Question

是否可以在 JS 中使用框架 ag-grid 根據其值應用單元格的條件背景顏色格式，例如 Excel 條件格式（例如，此鏈接中的第二個表格格式是我試圖實現的一個很好的例子）。

基本上，包含最高值的單元格是綠色的，並且隨着它們的降低而趨於紅色，當它們達到中值時是黃色（在上面的鏈接中應用了相反的情況）

如您所見，它不是一個簡單的 CellClassRules，因為單元格顏色取決於表中的單元格值，而不僅僅是特定的行或列。

我在 ag-grid 文檔中沒有找到這樣的選項。

Answer 1

您為什么不使用漸變列功能，只需單擊幾下，它就會為您完成所有工作？ https://demo.adaptabletools.com/style/aggridgradientcolumndemo

Answer 2

為cellStyle寫一個 function 並讓這個 function 查看表中的每個值，確定它的排名，然后讓它返回單元格的相關顏色，即它越低，返回一個更“紅色”的顏色，越高，返回“更綠”的顏色。 像這樣的東西：

function myCellStyleFunction(params) {
  const totalCellCount = params.api.getDisplayedRowCount() * columnsCount;
  let allValuesInTable = [];

  rowData.forEach((x) => {  
    const valuesForRow = Object.keys(x).map(function (k) {
      return x[k];
    });
    allValuesInTable = allValuesInTable.concat(valuesForRow);
  });
  
  const valuesForTableOrdered = allValuesInTable.sort(function (a, b) {
    return a - b;
  });
  
  const valueIndex = valuesForTableOrdered.indexOf(params.value);
  console.log(valueIndex)
  debugger;
  const bgColour = generateColor('#FF0000','#00FF00',totalCellCount,valueIndex)

  return { backgroundColor: '#' + bgColour };
}

並在defaultColDef中應用此cellStyle ，以便將其應用於每個單元格。

演示。