我正在尝试使用 chartist.js 显示折线图。我已使用 reduce() 从 props 中提取数据。在 averages 对象中，我的键为 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 ;

使用 .forEach() ，我尝试创建新的对象数组，其中 sum/count 作为 value ， key 作为 year 。

屏幕截图：