如何解决如何在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 举报,一经查实,本站将立刻删除。