如何为 Ag Grid Cell 的 x% 宽度提供背景颜色？答案

【问题标题】：How to provide background color to x% width of Ag Grid Cell?如何为 Ag Grid Cell 的 x% 宽度提供背景颜色？
【发布时间】：2020-12-14 21:43:56
【问题描述】：

我想根据动态宽度为 Ag Grid Cell 应用背景颜色。列基本上显示了任务的进度，例如 1/20(5% green) , 2/4(50% green) 所以我需要像进度条一样显示背景颜色。

【问题讨论】：

请通过 sudo class 查看此线程的 CSS 解决方案。stackoverflow.com/questions/18647184/…
如果我想使用上述链接中提供的线性渐变方法，我是否需要提供两种颜色，是否可以只为 x% 宽度指定一种颜色并保持 (100-x)%照原样？

标签： javascript css reactjs ag-grid ag-grid-react

【解决方案1】：

您可以通过使用rgba() 函数来设置background-color 轻松地做到这一点。这是我的实现

function ProgressCellRenderer(props) {
  const progress = props.data.completedTasks / props.data.totalTasks;
  return (
    <div>
      <div
        style={{
          position: "absolute",
          width: progress * 100 + "%",
          height: "100%",
          backgroundColor: `rgba(130,210,73,${progress})`
        }}
      />
      <div style={{ position: "absolute" }}>{(progress * 100).toFixed(2)}%</div>
    </div>
  );
}

用法

<AgGridReact
  columnDefs={[
  {
    headerName: "Completed Tasks",
    field: "completedTasks",
  },
  {
    headerName: "Total Tasks",
    field: "totalTasks",
  },
  {
    headerName: "Progress",
    cellRenderer: "ProgressCellRenderer"
  },
  ,...]}
  frameworkComponents={{
    ProgressCellRenderer
  }}
/>

现场演示

【讨论】：

【解决方案2】：

你也可以使用 cellRender 来返回元素：

cellRenderer: params => return 
    `<div class="flex progress-bar__container" ng-if="isProgress()">
        <div class="flex--1" ng-class="{'progress-bar': ii <= getStage() }" ngFor="ii in [0, 1, 2, 3, 4, 5]"></div>
    </div>`

以上代码是 Angular 的 sudo 代码，你可以改变它来响应。

【讨论】：