Я использую диаграмму. 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>