admin管理员组文章数量:1356698
I am trying to display Linechart using chartist.js. I have used reduce()
to extract data from props
. I have keys as year
and values as average value
in averages object. But I am not able to display the line chart as I am not able to see any lines on chart I am getting type error. I have created React ponent and inside ponentDidMount()
I have added my line chart code. I think the issue is related to javascript/reactjs and not chartist.js
Code:
class Linechart extends Component {
constructor(props){
super(props);
}
ponentDidMount(){
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 ;
Using .forEach()
I am trying to create new array of objects with sum/count
as a value
and key
as year
.
Screenshot:
I am trying to display Linechart using chartist.js. I have used reduce()
to extract data from props
. I have keys as year
and values as average value
in averages object. But I am not able to display the line chart as I am not able to see any lines on chart I am getting type error. I have created React ponent and inside ponentDidMount()
I have added my line chart code. I think the issue is related to javascript/reactjs and not chartist.js
Code:
class Linechart extends Component {
constructor(props){
super(props);
}
ponentDidMount(){
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 ;
Using .forEach()
I am trying to create new array of objects with sum/count
as a value
and key
as year
.
Screenshot:
Share Improve this question edited Jun 24, 2018 at 9:36 stone rock asked Jun 24, 2018 at 9:14 stone rockstone rock 1,95310 gold badges45 silver badges76 bronze badges 3-
3
The line indicated in the OP is not the line giving the error that is in the console image, which is something like
data.normalized[seriesIndex].forEach is not a function
. – RobG Commented Jun 24, 2018 at 9:26 -
@RobG How can I find average ? I want
sum/count
as a value and key asyear
. – stone rock Commented Jun 24, 2018 at 9:32 - @RobG I have edited my question please see it. – stone rock Commented Jun 24, 2018 at 9:37
1 Answer
Reset to default 11Change your code like this see if the problem is gone. In docs it shows series
should be a multidimensional array.
const data = {
series:[series],
labels:labels
}
本文标签: javascriptI am getting TypeError saying forEach is not a functionStack Overflow
版权声明:本文标题:javascript - I am getting TypeError saying forEach is not a function? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1743962510a2569288.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论