Html 如何构建磁盘状态图？

我正在尝试构建一个类似这样的html，用于在我的页面上显示处于React状态的磁盘状态。我希望找到一个像这样的可重用组件。这种类型的图表叫什么，以便我可以查找任何可用的实现？这会是一些图表库的一部分吗

如果要从头开始构建，我从哪里开始呢？

您可以使用HTML5

元素来实现这一点。

---

关于进度元素的更多信息

你基本上是在说几个进度条放在一起。。。以下是如何在React中创建进度条：

主要组成部分：

class ProgressBarExample extends React.Component {
  state = { percentage: 0 };

  nextStep = () => {
    if (this.state.percentage === 100) return;
    this.setState({ percentage: this.state.percentage + 20 });
  };

  render() {
    return (
      <div>
        <h2> A React Progress Bar </h2>
        <ProgressBar percentage={this.state.percentage} />

        <div style={{ marginTop: '20px' }}>
          <button onClick={this.nextStep}>Next Step</button>
        </div>

        <div
          style={{ marginTop: '10px', color: 'blue', marginBottom: '15px' }}
          onClick={() => this.setState({ percentage: 0 })}
        >
          Reset
        </div>
      </div>
    );
  }
}

class ProgressBarExample扩展了React.Component{
状态={百分比：0}；
下一步=（）=>{
如果（this.state.percentage==100）返回；
this.setState（{percentage:this.state.percentage+20}）；
};
render（）{
返回(
反应进度条
下一步
this.setState（{百分比：0}）}
>
重置
);
}
}

这是进度条组件：

const ProgressBar = props => {
  return (
    <div className="progress-bar">
      <Filler percentage={props.percentage} />
    </div>
  );
};

const ProgressBar=props=>{
返回(
);
};

这是您的填表符：

const Filler = props => {
  return <div className="filler" style={{ width: `${props.percentage}%` }} />;
};

const Filler=props=>{
返回；
};

这里是现场演示：