我在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>
3条答案
按热度按时间j8ag8udp1#
x轴应该是恒定的。所以你不能有一种以上的数据。在你的例子中,你想在x轴上同时显示时间、星期和月份,这在单个图形中是不可能的。您可以生成三个图表,也可以通过触发事件(如单击等)在同一图表上填充不同的数据集。
我的意思是,当天按钮被点击,数据集的一天将填充标签,'下午4点','下午5点','下午6点',当月被点击,数据集的一个月与**标签'一月','二月'**等应填充
2cmtqfgy2#
下面是下面问题的工作代码。我使用了一个标签集,并更新它的按钮点击。同样,我更新了数据集。
unftdfkk3#
您错误地列出了“Jun”,请在使用引号时保持一致。只要把“君”改成“君”,一切就都正常了。
奖金,请查找一些编码风格:
谷歌JavaScript风格指南,Airbnb JavaScript风格指南等。