时间戳

首页 > 解决方案 > React JS 创建百分比图表

reactjs - React JS 创建百分比图表

问题描述

我正在创建一个图表，该图表将显示用户输入数字的设定百分比。例如，用户输入“200”，图表将显示“100% = 200、95% = 190 等”。图表上的百分比将保持不变，只是输入数字和百分比结果会发生变化。希望这是有道理的。

这是图表的代码：

import React, { useState } from 'react';

const issStyles = {
    chart: {
        display: 'flex',
        flexDirection: 'row',
        margin: '20px',
    },
    percentBox: {
        background: '#E7E7E7',
        borderRadius: '10px',
        padding: '5px',
        display: 'flex',
        justifyContent: 'center',
        width: '200px',
        fontSize: '24px',
    },
    percentResultBox: {
        background: '#E7E7E7',
        borderRadius: '10px',
        padding: '5px',
        display: 'flex',
        justifyContent: 'center',
        width: '200px',
        fontSize: '24px',
    },
    line: {
        padding: '5px',
        justifyContent: 'center',
        fontSize: '24px',
    },
}

export default function PercentChart(props) {
    const [ percent ] = useState(props.percent)
    const [ percentResult ] = useState(props.percentResult)
    
    return (
        <div style={issStyles.chart}>
            <div style={issStyles.percentBox}>
                {percent}
            </div>
            <div style={issStyles.line}>
                ----------
            </div>
            <div style={issStyles.percentResultBox}>
                {percentResult}
            </div>
        </div>
    )
};

这是它被调用的页面的代码：

import React from 'react';
import HeaderButton from '../../components/HeaderButton';
import PercentChart from '../../components/PercentChart';

const issStyles = {
    PRNumber: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        margin: '20px',
        fontFamily: 'PT Sans Caption',
        fontSize: '18px',
    },
    Space: {
        margin: '10px',
    },
    PRChart: {
        background: '#C4C4C4',
        width: '80%',
        borderRadius: '10px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        margin: '0 auto',
    },
};

export default function PercentPage() {
    return (
        <div>
            <HeaderButton exerciseName="Movement 1" />
            <div style={issStyles.PRNumber}>
                PR:
                <input type="number" placeholder="Enter current PR" style={issStyles.Space}/>
            </div>
            <div style={issStyles.PRChart}>
                <PercentChart percent="100%" percentResult="100"/>
                <PercentChart percent="95%" percentResult="95"/>
                <PercentChart percent="90%" percentResult="90"/>
                <PercentChart percent="85%" percentResult="85"/>
                <PercentChart percent="80%" percentResult="80"/>
                <PercentChart percent="75%" percentResult="75"/>
                <PercentChart percent="70%" percentResult="70"/>
                <PercentChart percent="65%" percentResult="65"/>
                <PercentChart percent="60%" percentResult="60"/>
                <PercentChart percent="55%" percentResult="55"/>
            </div>
        </div>  
    );
};

这是页面当前外观的屏幕截图： 在此处输入图像描述

基本上，我想要发生的是用户将在“输入当前 PR”输入字段中输入一个数字，图表右侧的数字将自动更新为该数字的相应百分比。我现在知道我的数字是硬编码的，根本与输入字段无关，这就是我主要需要帮助的地方。我是编码新手，所以任何额外的提示/更正都会很棒。谢谢！

标签： reactjsinputchartspercentage

解决方案

可运行代码片段

const { useEffect, useState } = React;
const { Container, Table, Form } = ReactBootstrap;

function App() {
  const [pr, setPr] = useState(100);
  const [levels, setLevels] = useState([]);

  useEffect(() => {
    const arr = [];
    let percentage = 100;
    while (percentage > 0) {
      arr.push([percentage, (pr * percentage) / 100]);
      percentage -= 5;
    }
    setLevels(arr);
  }, [pr]);

  return (
    <Container>
      <Form>
        <Form.Group controlId="formBasicEmail">
          <Form.Label>PR</Form.Label>
          <Form.Control
            type="input"
            placeholder="100"
            value={pr}
            onChange={(e) => setPr(e.target.value)}
          />
        </Form.Group>
      </Form>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Percent</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          {levels.map((level) => (
            <tr key={level[0]}>
              <td>{level[0]}%</td>
              <td>{level[1]}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Container>
  );
}


// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="react"></div>

修改片段之前的示例代码

import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Table from "react-bootstrap/Table";
import Form from "react-bootstrap/Form";

export default function App() {
  const [pr, setPr] = useState(100);
  const [levels, setLevels] = useState([]);

  useEffect(() => {
    const arr = [];
    let percentage = 100;
    while (percentage > 0) {
      arr.push([percentage, (pr * percentage) / 100]);
      percentage -= 5;
    }
    setLevels(arr);
  }, [pr]);

  return (
    <Container>
      <Form>
        <Form.Group controlId="formBasicEmail">
          <Form.Label>PR</Form.Label>
          <Form.Control
            type="input"
            placeholder="100"
            value={pr}
            onChange={(e) => setPr(e.target.value)}
          />
        </Form.Group>
      </Form>   
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Percent</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          {levels.map((level) => (
            <tr key={level[0]}>
              <td>{level[0]}%</td>
              <td>{level[1]}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Container>
  );
}

我使用React Bootstrap进行格式化。这个想法是您有表单字段供用户输入数字。当它改变时，onEffect 触发并解析输入。然后它计算百分比并将它们放在一个数组中。数组设置为“级别”，我们使用 map 方法来渲染表格。

推荐阅读