如何在reactjs中使用chart.js显示动态多线图

问题描述

我想显示 plan1 和 plan2 的多线图表，x 轴为年龄，y 轴为 totalnestegg。。 >

我有 4 个数组对象，其中 age1 为 plan1，totalnestegg1 为 plan1，age2 为 plan2 和 totalnestegg2 plan2。

我可以显示单个计划，但不能显示多行。

age1 有 [65,70,71,......,100] 之类的项目，在 totalamount1 中有相应的金额。

age2 有 [70,72,100] 之类的项目，在 totalamount1 中有相应的金额。

我知道如何显示这种类型的标签，我当前的代码如下所示：

import React from 'react';
import {Line} from 'react-chartjs-2';

export default class displayGraph extends React.Component {

     state = {
        labels: [],datasets: [
          {
            label: 'Plan 1',fill: true,lineTension: 0,backgroundColor: 'gray',borderColor: 'gray',borderWidth: 0,data: this.props.totalnestEggForgraph1
          },{
            label: 'Plan 2',backgroundColor: '#ccccff',data: this.props.totalnestEggForgraph2
          }
        ]
      }
  render() {
    return (
      <div>
        <Line
          data={this.state}
          options={{
              
            title:{
              display:true,text:'Size of Retirement Savings',fontSize:20
            },legend:{
              display:true,position:'right'
            }
          }}
        />
      </div>
    );
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）