sto*_*ock 1 javascript reactjs
我正在尝试使用 chartist.js 显示 Linechart。我曾经reduce()从props. 我的键year和值与average value平均值对象一样。但我无法显示折线图,因为我无法在图表上看到任何线条,我遇到了类型错误。我已经创建了 React 组件,并在里面componentDidMount()添加了我的折线图代码。我认为这个问题与 javascript/reactjs 而不是 chartist.js 有关
代码:
class Linechart extends Component {
constructor(props){
super(props);
}
componentDidMount(){
const totals = this.props.bowldata.reduce((a, {season, econ}) => {
if (!a[season]) {
a[season] = {sum: 0, count: 0};
}
if(econ !== null){
a[season].count++;
a[season].sum += parseInt(econ);
}
return a;
}, {});
const averages = {};
Object.keys(totals).forEach(key => {
averages[key] = totals[key].sum / totals[key].count;
});
console.log(averages);
const series = Object.values(averages);
const labels = Object.keys(averages);
const data = {
series:series,
labels:labels
}
this.linechart = new Chartist.Line('.ct-line-chart', data, options);
}
render(){
return(
<div>
<div className="col-md-3 col-xs-6 ct-line-chart">
{this.linechart}
</div>
</div>
)}
}
export default Linechart ;
Run Code Online (Sandbox Code Playgroud)
使用.forEach()我正在尝试使用sum/countas avalue和keyas创建新的对象数组year。
像这样更改您的代码,看看问题是否消失。在文档中它显示series应该是一个多维数组。
const data = {
series:[series],
labels:labels
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2478 次 |
| 最近记录: |