html - 如何建立磁盘状态图？

Question

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

如果我要从头开始构建它，我应该从哪里开始？

Answer 1

你基本上是在谈论几个进度条放在一起......这里是如何在 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>
    );
  }
}

这是你的进度条组件:

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

这是你的填充物:

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

这是现场演示:https://codesandbox.io/s/wk628wy5yk