首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在React Chart Js 2中传递动态数据时出现问题

在React Chart Js 2中传递动态数据时出现问题
EN

Stack Overflow用户
提问于 2018-05-28 00:53:05
回答 1查看 1.5K关注 0票数 1

我已经成功地将动态数据传递给了React Chart JS 2,但在显示它时遇到了问题。请找到附件中图表的屏幕截图。

我正在试着为所有的费用和月份做一个折线图。正如您所看到的,在屏幕截图的控制台中可以看到两个数组。一个是花费的金额和相应的月份,可以在它下面的数组中看到。五月花了529美元,四月花了100美元。

这是我的Chart.js

代码语言:javascript
复制
import React from 'react';
import {connect} from 'react-redux';
import {Line} from 'react-chartjs-2';
import moment from 'moment';


const Chart = (props) => {
  console.log(props.expenses);
  const amount = props.expenses.map((expense) => {
    // console.log(expense.amount);
    // console.log(moment(expense.createdAt).format('MMMM'));
    return expense.amount;
  });
console.log(amount);

  const createdAt = props.expenses.map((expense) => {
    const arr_createdAt = expense.createdAt;
    return moment(arr_createdAt).format('MMMM');
  });
console.log(createdAt);

  const data = {
  labels: **createdAt**,
  datasets: [
    {
      label: 'My First dataset',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: **amount**
    }
  ]
};

return (
  <div>
    <div className = "page-header">
        <div className = "content-container">
            <h1 className = "page-header__title">CHART</h1>
        </div>
    </div>
    <div className = "content-container">
          <h2>Line Example</h2>
          <Line data={data} />
      </div>
  </div>
)};

const mapStateToProps = (state) => {
  return {
    expenses : state.expenses
  };
}


export default connect(mapStateToProps)(Chart);

我想做的是把五月份花费的所有费用放入桶中,并在五月线上显示总费用和,在其他月份也是如此。

任何帮助都是非常感谢的。谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-28 18:37:50

试试这个:

代码语言:javascript
复制
`let reducedValue = props.expenses.reduce((acc, item) => {
    let index = acc.findIndex(accItem => moment(accItem.createdAt).format('MMM') === moment(item.createdAt).format('MMM'));
    if(index < 0){
        acc.push({...item});
    } else {
        acc[index].amount += item.amount;
    }
    return acc;
}, []);
let amount = reducedValue.map(item => item.amount);
let createdAt = reducedValue.map(item => moment(item.createdAt).format('MMM'));
`
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50554423

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档