如何在表格组件中加入进度条形图？

方帅

113614

发布于
2023-09-13 北京

表格中指定一列，内容按照数据显示为进度图，并显示百分比文字。如何在表格组件中实现这个效果？

前端 visualization 可视化表格

阅读 2.5k

6 个回答

得票最新

YogiLiu

163

发布于
2023-09-14 广东

更新于
2023-09-14

可以使用背景径向渐变做到这个效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Progress</title>
    <style>
      table {
        width: 200px;
      }

      table,
      td {
        border: 1px solid #333;
      }

      table thead {
        background-color: #333;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>Progress</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 0%,
                rgba(0 0 0 / 0) 0%
              );
            "
          >
            0%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 10%,
                rgba(0 0 0 / 0) 10%
              );
            "
          >
            10%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 20%,
                rgba(0 0 0 / 0) 20%
              );
            "
          >
            20%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 30%,
                rgba(0 0 0 / 0) 30%
              );
            "
          >
            30%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 40%,
                rgba(0 0 0 / 0) 40%
              );
            "
          >
            40%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 50%,
                rgba(0 0 0 / 0) 50%
              );
            "
          >
            50%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 60%,
                rgba(0 0 0 / 0) 60%
              );
            "
          >
            60%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 70%,
                rgba(0 0 0 / 0) 70%
              );
            "
          >
            70%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 80%,
                rgba(0 0 0 / 0) 80%
              );
            "
          >
            80%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 90%,
                rgba(0 0 0 / 0) 90%
              );
            "
          >
            90%
          </td>
        </tr>
        <tr>
          <td
            style="
              background: linear-gradient(
                to right,
                green 100%,
                rgba(0 0 0 / 0) 100%
              );
            "
          >
            100%
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

林小志

4.4k2218

发布于
2023-09-14 浙江

td 里面加入一个 div 标签，然后控制这个 div 标签的宽度就可以了，比如：

<td>
  <div style="width: 50%;"></div>
</td>

寅春树

1.3k13234515

发布于
2023-09-14 美国

直接上效果：

我是用纯属html写的，方式有可多，可以用js,vue,css看你的项目，解决具体用什么，但原理一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .bg{background:#78D96D;line-height: 40px;text-align: right;}
  </style>
</head>
<body>
<table border="1" width="30%">
  <tr><td>
    <div class="bg" style="width: 50%">50%</div>
  </td></tr>
  <tr><td>
    <div class="bg" style="width: 100%">100%</div>
  </td></tr>
  <tr><td>
    <div class="bg" style="width: 10%">10%</div>
  </td></tr>
  <tr><td><div class="bg" style="width: 33%">33%</div></td></tr>
</table>
</body>
</html>

danranshizhi

17065281

发布于
2023-09-14 江苏

两个div就可以实现，一个代表底块，一个代表着色部分，将着色部分百分比设置为着色部分宽度

T_one

1.3k41531

发布于
2023-09-14 江西

使用ui框架实现的吗，一般table组件都支持自定义列模板，以iview为例

<Table border :columns="columns12" :data="data6">
  <template slot-scope="{ row }" slot="name">
     <div>进度</div>
  </template>
</Table>

columns12: [
  {
      title: 'Name',
      slot: 'name'
  },
]

玄魂

911319

发布于
2023-09-27 北京

解决方案 Solution

这里使用开源表格组件VTable来实现这个功能。可以通过在columns中将cellType设置为progressbar，指定该列为progressbar类型（进度图）单元格；通过配置columns中的style，可以配置进度图的样式：

{
    field: "value",
    title: "progress",
    cellType: "progressbar",
    style: {
      barColor: DEFAULT_BAR_COLOR,
      barBgColor: "#ddd",
      barHeight: 30,
      barBottom: 4,
      textAlign: "right"
    },
    fieldFormat: (data: any) => {
      return data.value + "%";
    },
    width: 250
}

在style中：

barColor: 进度条颜色，可以配置为函数来改变不同进度的颜色
barBgColor: 进度条背景颜色
barHeight: 进度条高度，支持配置百分比
barBottom: 进度条距离底部高度，支持配置百分比
......

通过fieldFormat，可以修改单元格中的文字内容，显示百分比文字。

通过修改barType，可以将进度图改为简单的柱图，可以用来显示同时存在正负数据的内容。

代码示例 Code Example

代码参考 Code Example

const columns = [
  {
    field: "id",
    title: "ID",
    width: 80
  },
  {
    field: "value",
    title: "progress",
    cellType: "progressbar",
    style: {
      barColor: DEFAULT_BAR_COLOR,
      barBgColor: "#ddd",
      barHeight: 30,
      barBottom: 4,
      textAlign: "right"
    },
    fieldFormat: (data: any) => {
      return data.value + "%";
    },
    width: 250
  },
  {
    field: "value1",
    title: "axis",
    cellType: "progressbar",
    barType: "negative",
    min: -50,
    max: 50,
    style: {
      barHeight: 30,
      barBottom: 4,
      textAlign: "right"
    },
    width: 250
  }
];
const option: TYPES.ListTableConstructorOptions = {
  records,
  columns
};

结果展示 Results

在线效果参考：https://codesandbox.io/s/vtable-progress-bar-l69jtk

如何在表格组件中加入进度条形图？

解决方案 Solution

代码示例 Code Example

结果展示 Results

相关文档 Related Documentation

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

为什么会出现CORS error？