我在react中使用chart.js来创建折线图。我必须显示日、月、年的数据。对于当天,我有不同的标签和数据,对于月份,我有不同的标签和数据,而对于年份,我也有不同的标签和数据。
我可以添加多个数据集并且工作正常,但是当我尝试添加多个标签时,它不起作用。这是我的代码。
实时代码演示:https://codesandbox.io/s/objective-bird-8owf1
import {Line} from 'react-chartjs-2';
const checkinsData={
labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
datasets:[
{
label:"Day",
backgroundColor:"blue",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
data:[4,5,6,7,8,9,10,11,12,1,2,3,4]
},
{
label:"Week",
backgroundColor:"green",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
labels:['Sun','Mon','Tue','Web','Thu','Fri','Sat'],
data:[1,2,3,4,5,6,7]
},
{
label:"Month",
backgroundColor:"red",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
data:[1,2,3,4,5,6,7,8,9,10,11,12]
}
]
}
<div className="col-md-8 default-shadow bg-white pd-30-0 border-radius-10 align-center">
<Line
data={checkinsData}
options={
{
title:{
text:'Total Check-ins',
fontSize:20,
display:true
},
legend:{
display:true,
position:'top'
}
}
}
/>
</div>
你的 x 轴应该是恒定的。所以你不能有超过一种的数据。在您的情况下,您希望 x 轴上同时显示时间、星期和月份名称,这在单个图表中是不可能的。您可以生成三个图表,也可以通过触发事件(如单击等)在同一图表上填充不同的数据集。
我的意思是,当单击日期按钮时,日期的数据集将填充标签,'4 P.M','5 P.M','6 P.M',当单击月份时,数据将填充设置月份时应填充标签“jan”、“feb”等
这是以下问题的工作代码。我使用了一组标签并在单击按钮时更新它。同样,我更新了数据集。
import React from 'react';
import {Line} from 'react-chartjs-2';
const checkinsData={
labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
datasets:[
{
label:"Day",
backgroundColor:"blue",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
data:[4,5,6,7,8,9,10,11,12,1,2,3,4]
}
]
}
class CheckinGraph extends React.Component{
constructor(props)
{
super(props)
this.state={
key: Date.now()
}
this.setDayData=this.setDayData.bind(this);
this.setWeekData=this.setWeekData.bind(this);
this.setMonthData=this.setMonthData.bind(this);
}
setDayData=function() {
checkinsData.datasets.backgroundColor="blue";
checkinsData.labels=['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'];
checkinsData.datasets[0].data=[4,5,6,7,8,9,10,11,12,1,2,3,4];
this.setState({ key: Date.now() });
}
setWeekData=function()
{
checkinsData.datasets.backgroundColor="green";
checkinsData.labels=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
checkinsData.datasets[0].data=[40,50,16,18,80,29,10];
this.setState({ key: Date.now() });
}
setMonthData=function()
{
checkinsData.datasets.backgroundColor="purple";
checkinsData.labels=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
checkinsData.datasets[0].data=[100,120,200,256,560,178,280,190,370,100,300,200];
this.setState({ key: Date.now() });
}
render()
{
return(
<div className="col-md-12 default-shadow bg-white pd-30-0 border-radius-10 align-center">
<ul className="list list-inline graph-label-list">
<li className="list-inline-item" onClick={this.setDayData}>
Day
</li>
<li className="list-inline-item" onClick={this.setWeekData}>
Week
</li>
<li className="list-inline-item" onClick={this.setMonthData}>
Month
</li>
</ul>
<Line
redraw
data={checkinsData}
options={
{
title:{
display:false
},
legend:{
display:false
}
}
}
/>
</div>
)
}
}
export default CheckinGraph;
您错误地列出了“Jun”,请在使用引号时保持一致。 只需将“Jun”修复为“Jun”,一切就应该可以正常工作。
奖励,请查找一些编码风格:
Google JavaScript 风格指南, Airbnb JavaScript 风格指南等