特定角度的反应折线图或图形

问题描述

我创建了一个使用 react 计算轨迹的网站，例如：如果轨迹或角度为 30 度，那么我需要使用 react 折线图或图形来显示它。我写了这个反应代码来找出轨迹：

import React,{ useState } from 'react';
import './input.css';
import LineChart from 'react-linechart';

function Input(props) {
    const [riverVeLocity,setRiverVeLocity] = useState('');
    const [personVeLocity,setPersonVeLocity] = useState('');
    const [angleOfSwim,setAngleOfSwim] = useState('');
    const [widthOfRiver,setWidthOfRiver] = useState('');
    const [degree,setDegree] = useState();
    const [tiMetaken,setTiMetaken] = useState();

    const find = (e) => {
        e.preventDefault();
        let rVeLocity = parseInt(riverVeLocity);
        let pVeLocity = parseInt(personVeLocity);
        let aSwim = parseInt(angleOfSwim);
        let width = parseInt(widthOfRiver);
        setDegree((pVeLocity * Math.sin(aSwim * Math.PI / 180)) / (rVeLocity + (pVeLocity * Math.cos(aSwim * Math.PI / 180))))
        setTiMetaken(width / (pVeLocity * Math.sin(aSwim * Math.PI / 180)))
        //tanQ=Vmsiny/x+Vmcosy

        // time taken = width of river / (person veLocity * sin(angle of swim)

        console.log("degree=",degree);
        console.log("time taken",tiMetaken);

    }
        const data = [
            {                                   
                color: "steelblue",points: [{x: 4,y: 3}] 
            }
        ];


    return (
        <div id="input">
            <div id="inputF">
                <div class="main">
                    <p>There is a use case where a person wishes to swim with V veLocity across a river with a“X” veLocity and Y degree angle from one side of the river bank to another consideringthe width to be “W”. You have to develop a web application which will plot a trajectory ofthe flow and time taken to cross the river​,​where all parameters can be changed viainput Box of
              <br /> 1.River VeLocity - X m/s
               <br />2.Person VeLocity - V m/s
               <br />3.Angle of swim  - Y
               <br />4.degreeWidth of river - W metre</p>

                    <form className="form1">
                        <input className="un" type="text" name="riverVeLocity" value={riverVeLocity} placeholder="River VeLocity" onChange={e => { setRiverVeLocity(e.target.value) }}></input>
                        <input className="un" type="text" name="personVeLocity" value={personVeLocity} placeholder="Person VeLocity" onChange={e => { setPersonVeLocity(e.target.value) }}></input>
                        <input className="un" type="text" name="angleOfSwim" value={angleOfSwim} placeholder="Angle Of Swim" onChange={e => { setAngleOfSwim(e.target.value) }}></input>
                        <input className="un" type="text" name="widthOfRiver" value={widthOfRiver} placeholder="width Of River" onChange={e => { setWidthOfRiver(e.target.value) }}></input>
                        <button className="submit" onClick={find}>Solve</button>
                    </form>

                    <div className="solution">
                        <h3>Trajectory  : {degree}</h3>
                        <h3 >Time taken : {tiMetaken}</h3>
                    </div>
                    <h1></h1>
                    <LineChart 
                        width={400}
                        height={400}
                        data={data}
                    />
                </div>
            </div>
        </div>

    );
}
export default Input;

我想要的是，如果我们得到任何角度或度数，那么它应该使用图形或折线图来表示，例如

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）