React：表格列單元格，帶色標的條件格式

假設我有一個應該在表格上繪制的資料集。一列給出市場名稱，第二列給出市場排名。

我希望第二列中的單元格具有從最大值到最小值的色階，其中最大值為“綠色”，中間為“白色”或“透明”，最小值為“紅色”。所有中間值都應該是中間值。下面是我想在 Excel 中復制的示例。

有誰知道這怎么可能？我在下面列出的代碼沙箱中試了一下，但無法從綠色變為透明再變為紅色。

uj5u.com熱心網友回復：

這是一種使用pickHex()函式的方法，該函式根據權重（比率）回傳兩種顏色之間的色調。

我已將原始陣列切成 20 個條目，以顯示一個較小的表格。

向下滾動，找到實時 Codesandbox 演示的鏈接。

import original_data from "./testData";

// Source: https://stackoverflow.com/questions/30143082/how-to-get-color-value-from-gradient-by-percentage-with-javascript#answer-30144587
function pickHex(color1, color2, weight) {
  var w1 = weight;
  var w2 = 1 - w1;
  var rgb = [Math.round(color1[0] * w1   color2[0] * w2),
      Math.round(color1[1] * w1   color2[1] * w2),
      Math.round(color1[2] * w1   color2[2] * w2)];
  return rgb;
}

const green = [0,255,0];
const white = [255,255,255];
const red = [255,0,0];

// Green to White: 1 => 0
// console.log( pickHex(green,white, 1) );
// console.log( pickHex(green,white, 0.5) );
// console.log( pickHex(green,white, 0) );

// White top Red: 1 => 0
// console.log( pickHex(white,red, 1) );
// console.log( pickHex(white,red, 0.5) );
// console.log( pickHex(white,red, 0) );

export default function App() {
  const data = original_data.slice(0,20);
  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>Market</th>
            <th>Rank</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => {
            let backgroundColor;
            const ratio = (index / (data.length / 2 )); 
            if ( ratio > 1 ){
              console.log("We're in the middle...");
              backgroundColor = pickHex(red,white,ratio-1);              
            } else {
              backgroundColor = pickHex(white,green, ratio);              
            }
            backgroundColor = `rgba(${backgroundColor.join(",")})`;
            return (
              <tr key={index}>
                <td>{item.Market}</td>
                <td style={{ backgroundColor }}>
                  {item.CombinedzScore}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

Codesandbox 演示

顯示代碼片段

<script>
  const data = [
    {
      No: "16980",
      Market: "Chicago-Naperville-Elgin, IL-IN-WI",
      CombinedzScore: "131.71"
    },
    {
      No: "31080",
      Market: "Los Angeles-Long Beach-Anaheim, CA",
      CombinedzScore: "128.07"
    },
    {
      No: "35620",
      Market: "New York-Newark-Jersey City, NY-NJ-PA",
      CombinedzScore: "123.41"
    },
    {
      No: "19100",
      Market: "Dallas-Fort Worth-Arlington, TX",
      CombinedzScore: "121.02"
    },
    {
      No: "26420",
      Market: "Houston-The Woodlands-Sugar Land, TX",
      CombinedzScore: "120.88"
    },
    {
      No: "12060",
      Market: "Atlanta-Sandy Springs-Alpharetta, GA",
      CombinedzScore: "120.59"
    },
    {
      No: "19820",
      Market: "Detroit-Warren-Dearborn, MI",
      CombinedzScore: "119.17"
    },
    {
      No: "16740",
      Market: "Charlotte-Concord-Gastonia, NC-SC",
      CombinedzScore: "112.22"
    },
    {
      No: "24860",
      Market: "Greenville-Anderson, SC",
      CombinedzScore: "112.20"
    },
    {
      No: "26900",
      Market: "Indianapolis-Carmel-Anderson, IN",
      CombinedzScore: "112.15"
    }];
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function pickHex(color1, color2, weight) {
  var w1 = weight;
  var w2 = 1 - w1;
  var rgb = [Math.round(color1[0] * w1   color2[0] * w2),
      Math.round(color1[1] * w1   color2[1] * w2),
      Math.round(color1[2] * w1   color2[2] * w2)];
  return rgb;
}

const green = [0,255,0];
const white = [255,255,255];
const red = [255,0,0];

function App() {
  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>Market</th>
            <th>Rank</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => {
            let backgroundColor;
            const ratio = (index / (data.length / 2 )); 
            if ( ratio > 1 ){
              backgroundColor = pickHex(red,white,ratio-1);                   } else {
              backgroundColor = pickHex(white,green, ratio);                 }
            backgroundColor = `rgba(${backgroundColor.join(",")})`;
            return (
              <tr key={index}>
                <td>{item.Market}</td>
                <td
                  style={{ backgroundColor }}
                >
                  {item.CombinedzScore}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement );
</script>

標籤：javascript css 反应 数据表

上一篇：背景顏色的影像

下一篇：頁面底部大空白