Javascript Chart.js'；即使调用了setState，也不能刷新
我需要设置几个点，使用散点和直线绘制 但我不知道为什么我更改了新值并使用setState更改图表的状态。这是行不通的 我试图实现的是使用和图表绘制多个点 以下是我目前正在使用的文件：Javascript Chart.js'；即使调用了setState，也不能刷新,javascript,node.js,reactjs,web,chart.js,Javascript,Node.js,Reactjs,Web,Chart.js,我需要设置几个点，使用散点和直线绘制 但我不知道为什么我更改了新值并使用setState更改图表的状态。这是行不通的 我试图实现的是使用和图表绘制多个点 以下是我目前正在使用的文件：main.js、control.js、和cartesian.js main.js import React, { Component } from 'react'; import Cartesian from './Cartesian/Cartesian'; import Control from './Contro
main.jscontrol.jscartesian.jsimport React, { Component } from 'react';
import Cartesian from './Cartesian/Cartesian';
import Control from './Control/Control';
import './Main.css'
class Main extends Component {
constructor(props){
super(props);
this.state = {
data: {
upperX : 0,
upperY : 0,
lowerX : 0,
lowerY : 0
}
}
}
handleCallback = (childData) => {
this.setState({
data: {
upperX : childData.upperX,
upperY : childData.upperY,
lowerX : childData.lowerX,
lowerY : childData.lowerY,
}
}, () => {
console.log(this.state.data)
})
}
render() {
return (
<div className="main-container">
<Control parentCallback={this.handleCallback}></Control>
<Cartesian data={this.state.data}></Cartesian>
</div>
);
}
}
export default Main;
import React, { Component } from 'react';
import { InputGroup, FormControl, Row, Col, Button } from 'react-bootstrap'
import './Control.css'
class Control extends Component {
run = (event) => {
const upperArm = document.querySelector(".upperarm > input").value;
const lowerArm = document.querySelector(".lowerarm > input").value;
const upperAngle = document.querySelector(".upperangle > input").value;
const lowerAngle = document.querySelector(".lowerangle > input").value;
const upperX = Math.cos(upperAngle) * upperArm;
const upperY = Math.sin(upperAngle) * upperArm;
const lowerX = Math.cos(lowerAngle) * lowerArm;
const lowerY = Math.sin(lowerAngle) * lowerArm;
document.querySelector(".upperx > input").value = upperX + lowerX;
document.querySelector(".uppery > input").value = upperY + lowerY;
document.querySelector(".lowerx > input").value = lowerX;
document.querySelector(".lowery > input").value = lowerY;
const data = {
upperX : upperX + lowerX,
upperY : upperY + lowerY,
lowerX : lowerX,
lowerY : lowerY,
}
this.props.parentCallback(data);
// event.preventDefault();
}
render() {
return (
<div id="control">
<Row className="mt-5">
<Col>
<InputGroup size="sm" className="mb-3 upperarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row className="mt-2">
<Col>
<InputGroup size="sm" className="mb-3 upperangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Button className="ml-3 mb-2" variant="primary" onClick={this.run}>Run</Button>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 upperx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 uppery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 lowerx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
</div>
);
}
}
export default Control;
import React, { Component } from 'react';
import './Cartesian.css'
import { Scatter } from 'react-chartjs-2';
class Cartesian extends Component {
state = {
mydata : {
datasets: [{
label: 'Manipulator Robot',
data: [{
x: 0,
y: 0
}, {
x: this.props.data.lowerX,
y: this.props.data.lowerY
}, {
x: this.props.data.upperX,
y: this.props.data.upperY
}
],
borderColor: 'black',
borderWidth: 10,
pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 5,
pointHoverRadius: 5,
fill: false,
tension: 0,
showLine: true
}]
},
option : {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks : {
autoSkip: true,
suggestedMax: 10,
suggestedMin: -10,
},
}],
yAxes: [{
ticks : {
suggestedMax: 10,
suggestedMin: -10
},
}]
},
rotation: 90
}
}
render() {
return (
<div id="cartesian">
<Scatter data={this.state.mydata} options={this.state.option} height={300} width={700} redraw/>
</div>
);
}
}
export default Cartesian;
import React，{Component}来自'React'；
从“./Cartesian/Cartesian”导入笛卡尔坐标；
从“./Control/Control”导入控件；
导入“./Main.css”
类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{
大写：0，
艾比：0，
下限：0，
洛厄里：0
}
}
}
handleCallback=（childData）=>{
这是我的国家({
数据：{
upperX:childData.upperX，
upperY:childData.upperY，
lowerX:childData.lowerX，
lowerY:childData.lowerY，
}
}, () => {
console.log（this.state.data）
})
}
render（）{
返回(
);
}
}
导出默认主；
import React, { Component } from 'react';
import Cartesian from './Cartesian/Cartesian';
import Control from './Control/Control';
import './Main.css'
class Main extends Component {
constructor(props){
super(props);
this.state = {
data: {
upperX : 0,
upperY : 0,
lowerX : 0,
lowerY : 0
}
}
}
handleCallback = (childData) => {
this.setState({
data: {
upperX : childData.upperX,
upperY : childData.upperY,
lowerX : childData.lowerX,
lowerY : childData.lowerY,
}
}, () => {
console.log(this.state.data)
})
}
render() {
return (
<div className="main-container">
<Control parentCallback={this.handleCallback}></Control>
<Cartesian data={this.state.data}></Cartesian>
</div>
);
}
}
export default Main;
import React, { Component } from 'react';
import { InputGroup, FormControl, Row, Col, Button } from 'react-bootstrap'
import './Control.css'
class Control extends Component {
run = (event) => {
const upperArm = document.querySelector(".upperarm > input").value;
const lowerArm = document.querySelector(".lowerarm > input").value;
const upperAngle = document.querySelector(".upperangle > input").value;
const lowerAngle = document.querySelector(".lowerangle > input").value;
const upperX = Math.cos(upperAngle) * upperArm;
const upperY = Math.sin(upperAngle) * upperArm;
const lowerX = Math.cos(lowerAngle) * lowerArm;
const lowerY = Math.sin(lowerAngle) * lowerArm;
document.querySelector(".upperx > input").value = upperX + lowerX;
document.querySelector(".uppery > input").value = upperY + lowerY;
document.querySelector(".lowerx > input").value = lowerX;
document.querySelector(".lowery > input").value = lowerY;
const data = {
upperX : upperX + lowerX,
upperY : upperY + lowerY,
lowerX : lowerX,
lowerY : lowerY,
}
this.props.parentCallback(data);
// event.preventDefault();
}
render() {
return (
<div id="control">
<Row className="mt-5">
<Col>
<InputGroup size="sm" className="mb-3 upperarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row className="mt-2">
<Col>
<InputGroup size="sm" className="mb-3 upperangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Button className="ml-3 mb-2" variant="primary" onClick={this.run}>Run</Button>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 upperx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 uppery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 lowerx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
</div>
);
}
}
export default Control;
import React, { Component } from 'react';
import './Cartesian.css'
import { Scatter } from 'react-chartjs-2';
class Cartesian extends Component {
state = {
mydata : {
datasets: [{
label: 'Manipulator Robot',
data: [{
x: 0,
y: 0
}, {
x: this.props.data.lowerX,
y: this.props.data.lowerY
}, {
x: this.props.data.upperX,
y: this.props.data.upperY
}
],
borderColor: 'black',
borderWidth: 10,
pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 5,
pointHoverRadius: 5,
fill: false,
tension: 0,
showLine: true
}]
},
option : {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks : {
autoSkip: true,
suggestedMax: 10,
suggestedMin: -10,
},
}],
yAxes: [{
ticks : {
suggestedMax: 10,
suggestedMin: -10
},
}]
},
rotation: 90
}
}
render() {
return (
<div id="cartesian">
<Scatter data={this.state.mydata} options={this.state.option} height={300} width={700} redraw/>
</div>
);
}
}
export default Cartesian;
import React，{Component}来自'React'；
从“react bootstrap”导入{InputGroup，FormControl，Row，Col，Button}
导入“./Control.css”
类控件扩展组件{
运行=（事件）=>{
const upperArm=document.querySelector（“.upperArm>input”）.value；
const lowerArm=document.querySelector（“.lowerArm>input”）.value；
const upperAngle=document.querySelector（“.upperAngle>input”）.value；
const lowerAngle=document.querySelector（“.lowerAngle>input”）.value；
常量upperX=数学cos（上角）*上臂；
const upperY=数学sin（上角）*上臂；
常数lowerX=数学cos（lowerAngle）*lowerArm；
常数lowerY=数学sin（lowerAngle）*lowerArm；
document.querySelector（“.upperx>input”）.value=upperx+lowerX；
document.querySelector（“.uppery>input”）.value=uppery+lowerY；
document.querySelector（“.lowerx>input”）。value=lowerx；
document.querySelector（“.lowery>input”）。value=lowery；
常数数据={
upperX:upperX+lowerX，
upperY:upperY+lowerY，
lowerX:lowerX，
洛厄里：洛厄里，
}
this.props.parentCallback（数据）；
//event.preventDefault（）；
}
render（）{
返回(
上臂
下臂
上角
下角
跑
上X
上Y
下X
下Y
);
}
}
出口默认控制；
import React, { Component } from 'react';
import Cartesian from './Cartesian/Cartesian';
import Control from './Control/Control';
import './Main.css'
class Main extends Component {
constructor(props){
super(props);
this.state = {
data: {
upperX : 0,
upperY : 0,
lowerX : 0,
lowerY : 0
}
}
}
handleCallback = (childData) => {
this.setState({
data: {
upperX : childData.upperX,
upperY : childData.upperY,
lowerX : childData.lowerX,
lowerY : childData.lowerY,
}
}, () => {
console.log(this.state.data)
})
}
render() {
return (
<div className="main-container">
<Control parentCallback={this.handleCallback}></Control>
<Cartesian data={this.state.data}></Cartesian>
</div>
);
}
}
export default Main;
import React, { Component } from 'react';
import { InputGroup, FormControl, Row, Col, Button } from 'react-bootstrap'
import './Control.css'
class Control extends Component {
run = (event) => {
const upperArm = document.querySelector(".upperarm > input").value;
const lowerArm = document.querySelector(".lowerarm > input").value;
const upperAngle = document.querySelector(".upperangle > input").value;
const lowerAngle = document.querySelector(".lowerangle > input").value;
const upperX = Math.cos(upperAngle) * upperArm;
const upperY = Math.sin(upperAngle) * upperArm;
const lowerX = Math.cos(lowerAngle) * lowerArm;
const lowerY = Math.sin(lowerAngle) * lowerArm;
document.querySelector(".upperx > input").value = upperX + lowerX;
document.querySelector(".uppery > input").value = upperY + lowerY;
document.querySelector(".lowerx > input").value = lowerX;
document.querySelector(".lowery > input").value = lowerY;
const data = {
upperX : upperX + lowerX,
upperY : upperY + lowerY,
lowerX : lowerX,
lowerY : lowerY,
}
this.props.parentCallback(data);
// event.preventDefault();
}
render() {
return (
<div id="control">
<Row className="mt-5">
<Col>
<InputGroup size="sm" className="mb-3 upperarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row className="mt-2">
<Col>
<InputGroup size="sm" className="mb-3 upperangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Button className="ml-3 mb-2" variant="primary" onClick={this.run}>Run</Button>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 upperx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 uppery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 lowerx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
</div>
);
}
}
export default Control;
import React, { Component } from 'react';
import './Cartesian.css'
import { Scatter } from 'react-chartjs-2';
class Cartesian extends Component {
state = {
mydata : {
datasets: [{
label: 'Manipulator Robot',
data: [{
x: 0,
y: 0
}, {
x: this.props.data.lowerX,
y: this.props.data.lowerY
}, {
x: this.props.data.upperX,
y: this.props.data.upperY
}
],
borderColor: 'black',
borderWidth: 10,
pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 5,
pointHoverRadius: 5,
fill: false,
tension: 0,
showLine: true
}]
},
option : {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks : {
autoSkip: true,
suggestedMax: 10,
suggestedMin: -10,
},
}],
yAxes: [{
ticks : {
suggestedMax: 10,
suggestedMin: -10
},
}]
},
rotation: 90
}
}
render() {
return (
<div id="cartesian">
<Scatter data={this.state.mydata} options={this.state.option} height={300} width={700} redraw/>
</div>
);
}
}
export default Cartesian;
import React，{Component}来自'React'；
导入“./Cartesian.css”
从'react-chartjs-2'导入{Scatter}；
类笛卡尔扩展组件{
状态={
我的数据：{
数据集：[{
标签：“机械手机器人”，
数据：[{
x:0,，
y:0
}, {
x:this.props.data.lowerX，
y:这是。道具。数据。洛厄里
}, {
x:this.props.data.upperX，
y:这个。道具。数据。上
}
],
边框颜色：“黑色”，
边框宽度：10，
pointBackgroundColor:['#000'、'#00bcd6'、'#d300d6']，
pointBorderColor:['#000'、'#00bcd6'、'#d300d6']，
点半径：5，
点半径：5，
填充：假，
张力：0，
秀行：没错
}]
},
选项：{
比例：{
xAxes：[{
类型：'线性'，
位置：'底部'，
滴答声：