如何解决反应折线图或图形以显示特定角度
我创建了一个使用 react 计算轨迹的网站,例如: 如果轨迹或角度是 30 度,那么我需要使用反应折线图或图形来显示它。 我写了这个反应代码来找出轨迹:
enter code here
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;
但我不知道如何使用反应折线图或图表表示假设 30 度的角度refer this image
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。