我正在使用ChartJS 4构建一个简单的时间日历图表,其中包含两个数据集,每个数据点Map到一个时间点。ChartJS在大多数情况下都能很好地提取数据/日期Map,但是看起来很随机,数据点是按顺序显示的。
Screengrab of chart with datapoint out of place
数据是按日期顺序提供的,所以我排除了数据是按顺序提供的:
var graphDataDt = [{ x:'14-11-2023', y:'92'},{ x:'13-11-2023', y:'96'},{ x:'12-11-2023', y:'86'},{ x:'11-11-2023', y:'94'},{ x:'10-11-2023', y:'98'},{ x:'09-11-2023', y:'96'},{ x:'08-11-2023', y:'95'},{ x:'07-11-2023', y:'63'},{ x:'30-10-2023', y:'76'},{ x:'29-10-2023', y:'96'},{ x:'28-10-2023', y:'94'},{ x:'27-10-2023', y:'90'},{ x:'26-10-2023', y:'78'},{ x:'25-10-2023', y:'82'},{ x:'24-10-2023', y:'73'},{ x:'23-10-2023', y:'83'},{ x:'22-10-2023', y:'94'},{ x:'21-10-2023', y:'74'},{ x:'20-10-2023', y:'73'},{ x:'19-10-2023', y:'86'},{ x:'18-10-2023', y:'89'},{ x:'17-10-2023', y:'95'},{ x:'16-10-2023', y:'72'},{ x:'15-10-2023', y:'84'},{ x:'14-10-2023', y:'91'},{ x:'13-10-2023', y:'92'},{ x:'12-10-2023', y:'96'},{ x:'11-10-2023', y:'92'},{ x:'10-10-2023', y:'73'},{ x:'09-10-2023', y:'86'},{ x:'08-10-2023', y:'90'},{ x:'07-10-2023', y:'77'},{ x:'06-10-2023', y:'89'},{ x:'05-10-2023', y:'92'},{ x:'04-10-2023', y:'81'},{ x:'04-10-2023', y:'94'},{ x:'04-10-2023', y:'78'},{ x:'03-10-2023', y:'92'},{ x:'02-10-2023', y:'76'},{ x:'01-10-2023', y:'88'},{ x:'30-09-2023', y:'94'},{ x:'29-09-2023', y:'94'},{ x:'28-09-2023', y:'86'},{ x:'27-09-2023', y:'87'},{ x:'26-09-2023', y:'84'},{ x:'25-09-2023', y:'85'},{ x:'24-09-2023', y:'84'},{ x:'22-09-2023', y:'83'},{ x:'21-09-2023', y:'79'},{ x:'20-09-2023', y:'93'},];
var graphDataMt = [{ x:'14-11-2023', y:'79'},{ x:'13-11-2023', y:'63'},{ x:'12-11-2023', y:'83'},{ x:'11-11-2023', y:'81'},{ x:'09-11-2023', y:'81'},{ x:'08-11-2023', y:'78'},{ x:'07-11-2023', y:'73'},{ x:'30-10-2023', y:'81'},{ x:'29-10-2023', y:'90'},{ x:'28-10-2023', y:'83'},{ x:'27-10-2023', y:'84'},{ x:'26-10-2023', y:'65'},{ x:'25-10-2023', y:'74'},{ x:'24-10-2023', y:'77'},{ x:'23-10-2023', y:'68'},{ x:'22-10-2023', y:'85'},{ x:'21-10-2023', y:'83'},{ x:'20-10-2023', y:'63'},{ x:'19-10-2023', y:'67'},{ x:'18-10-2023', y:'76'},{ x:'17-10-2023', y:'73'},{ x:'16-10-2023', y:'70'},{ x:'15-10-2023', y:'70'},{ x:'14-10-2023', y:'83'},{ x:'13-10-2023', y:'66'},{ x:'12-10-2023', y:'80'},{ x:'11-10-2023', y:'67'},{ x:'10-10-2023', y:'80'},{ x:'09-10-2023', y:'73'},{ x:'08-10-2023', y:'80'},{ x:'07-10-2023', y:'78'},{ x:'06-10-2023', y:'68'},{ x:'05-10-2023', y:'72'},{ x:'04-10-2023', y:'73'},{ x:'04-10-2023', y:'57'},{ x:'04-10-2023', y:'57'},{ x:'03-10-2023', y:'65'},{ x:'02-10-2023', y:'69'},{ x:'01-10-2023', y:'77'},{ x:'30-09-2023', y:'70'},{ x:'29-09-2023', y:'68'},{ x:'28-09-2023', y:'76'},{ x:'27-09-2023', y:'74'},{ x:'26-09-2023', y:'76'},{ x:'25-09-2023', y:'68'},{ x:'24-09-2023', y:'69'},{ x:'23-09-2023', y:'84'},{ x:'22-09-2023', y:'66'},{ x:'21-09-2023', y:'82'},{ x:'20-09-2023', y:'84'},];
字符串
这是我剩下的代码
new Chart(speedBracketsMM, {
type: 'line',
data: {
datasets: [{
pointRadius: 0,
label: 'Mobile',
data: graphDataMt,
backgroundColor: '#FF0000',
borderWidth: 1,
borderColor:'#990000',
tension: 0.1
},
{
pointRadius: 0,
label: 'Desktop',
data: graphDataDt,
backgroundColor: '#FFBF00',
borderWidth: 1,
borderColor:'#8f6b00',
tension: 0.1
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'Performance Scores',
font: {
size: 16
}
},
legend: {
position: 'bottom',
labels:{
usePointStyle: true,
pointStyle: 'cirlce',
}
}
},
scales: {
x: {
},
y: {
title: {
display: true,
text: 'Pages'
}
}
}
},
});
型
我就是想不通。在这个例子中,它是一个数据点,在其他例子中,它是3个或4个,但在所有情况下,数据都是按数据顺序提供的。
任何想法都将受到极大的赞赏。
我试着将我的代码分解为一个基本的ChartJS示例,设置各种日期刻度选项并使用基本数据。
EDIT/SOLUTION日期库/适配器似乎不太满意(不知道为什么)。我已经更新了它,使用fns适配器,将我的日期值更改为UNIX时间戳,现在一切似乎都很满意,没有任何额外的x轴变量。
1条答案
按热度按时间2guxujil1#
请尝试设置x轴,以便以您提供的格式专门解析“time”。例如:
字符串