javascript - React Chart.js BarGraph 未更新
问题描述
我正在尝试使用 实现条形图react-chartjs-2
,但在将数据传递给它时遇到了一些问题。
如果我在调用图形时直接声明数组,它可以工作:
render(){
return(
<div>
<NumberField label={"n"} min={0} max={9999999} handleChange={this.changeN}/>
<NumberField label={"p"} min={0} max={1} handleChange={this.changeP}/>
<Distribution name={this.state.name}
media={this.state.media}
varianza={this.state.varianza}
desviacion={this.state.desviacion}
/>
<BarGraph _labels={['a','b']} _data= {[1,2]}/>
</div>
)
}
但如果我尝试类似:
constructor (props) {
super(props);
this.changeN = this.changeN.bind(this);
this.changeP = this.changeP.bind(this);
this.state={
name: "Binomial",
p: 0,
n: 0,
media: 0,
varianza: 0,
desviacion: 0,
labels: [],
data: []
}
}
componentDidUpdate(_prevProps, prevState) {
if (prevState.p !== this.state.p || prevState.n !== this.state.n) {
this.setState({
media: this.calcularMedia(),
varianza: this.calcularVarianza(),
desviacion: this.calcularDesviacion(),
data: [1,2],
labels: ['a', 'b']
});
}
}
·········
render(){
return(
<div>
<NumberField label={"n"} min={0} max={9999999} handleChange={this.changeN}/>
<NumberField label={"p"} min={0} max={1} handleChange={this.changeP}/>
<Distribution name={this.state.name}
media={this.state.media}
varianza={this.state.varianza}
desviacion={this.state.desviacion}
/>
<BarGraph _labels={this.state.labels} _data= {this.state.data}/>
</div>
)
}
图形无法正确呈现:第二种方式
这是 BarGraph 组件:
import React, { useState, useEffect } from 'react';
import {Bar} from 'react-chartjs-2';
const BarGraph = ({_labels, _data}) =>{
const [chartData, setChartData] = useState({});
const chart = () =>{
setChartData({
labels: _labels,
datasets: [
{
label: 'label',
data: _data,
backgroundColor: 'rgba(75,192,192, 0.6)',
highlightStroke: "rgba(220,220,220,1)",
borderWidth: 0
}
]
})
}
useEffect(()=> {
chart()
}, [])
return(
<div className="App">
<div style={{height: "500px", width: "500px"}}>
<Bar data={chartData} options={{
legend:{
display: false
},
responsive: true,
title: {text: 'title', display: true},
scales:{
yAxes:[
{
ticks:{
autoSkip: true,
maxTicksLimit: 10,
beginAtZero: true
}
}
]
}
}}/>
</div>
</div>
)
}
export default BarGraph;
提前致谢。
解决方案
在主文件中声明数据并传递它可以正常工作:
const graphData= {
labels: ['t1', 't2'],
datasets: [
{
backgroundColor: 'rgba(90, 172, 170, 0.8)',
data: [15,78]
}
]
}
class Binomial extends Component {
render(){
console.log(this.state.data);
console.log(this.state.labels);
return(
<div>
<BarGraph3 data={graphData}/>
</div>
)
}
}
}
推荐阅读
- cypher - 在有评论的电影列表中查找演员阵容最多的电影
- python - 正则表达式匹配无效的 Unicode 字符
- php - 使用来自另一台服务器的 URL 解码 json 数据
- php - Laravel:违反完整性约束
- javascript - 循环遍历数组中的字符串,每秒显示一个
- kubernetes - 如何确定正在运行的 Kubernetes pod 的当前临时存储使用情况?
- javascript - 如何在 5 秒后使用 Jquery 卸载在 div 标签中加载的 HTML 页面?
- python-3.x - xpath从多个元素python连接文本
- c - 带/不带控制台的 Windows 启动过程
- html5-video - 全屏上的 VideoJS 播放列表 UI