ChartJS生成日期格式

Question

我使用ChartJS生成一个温度图，其中X轴是日期。但是我不能正确地将这些数据格式化为YYYY/MM/DD格式。

我Weatherdata

"weatherdata_history": [
{
"id": 70,
"weatherdata_type_id": 2,
"area_id": 1,
"date": "2021-07-25T00:00:00.000Z",
"temp_min": 9.25,
"temp_max": 23.28,
"temp_avg": 14.8721,
"feels_like_min": 8.39,
"feels_like_max": 22.69,
"feels_like_avg": 14.1175,
"pressure_min": 1015,
"pressure_max": 1021,
"pressure_avg": 1018.67,
"humidity_min": 38,
"humidity_max": 82,
"humidity_avg": 64.125,
"dew_point_min": 4.67,
"dew_point_max": 11.22,
"dew_point_avg": 7.48292,
"uvi_min": 0,
"uvi_max": 5.39,
"uvi_avg": 1.16333,
"clouds_min": 0,
"clouds_max": 20,
"clouds_avg": 2.95833,
"visibility_min": 10000,
"visibility_max": 10000,
"visibility_avg": 10000,
"wind_speed_min": 1.64,
"wind_speed_max": 3.81,
"wind_speed_avg": 2.47833,
"wind_deg_min": 1,
"wind_deg_max": 356,
"wind_deg_avg": 141.542,
"wind_gust_min": 1.85,
"wind_gust_max": 11.91,
"wind_gust_avg": 4.74042,
"rain_min": 0,
"rain_max": 0,
"rain_avg": 0,
"snow_min": 0,
"snow_max": 0,
"snow_avg": 0,
"createdAt": "2021-07-28T18:13:19.000Z",
"updatedAt": "2021-07-28T18:13:19.000Z"
}
...
]
}

ChartJS的数据如下:

const temp_data = {
labels: this.props.weatherdataDetails.weatherdata_history.map(e => e.date),
datasets: [
{
label: 'min',
data: this.props.weatherdataDetails.weatherdata_history.map(e => e.temp_min),
fill: false,
backgroundColor: 'rgb(4, 209, 158)',
borderColor: 'rgba(4, 209, 158, 0.2)',
},
],
};

ChartJS的选项有:

const temp_options = {
responsive: true,
plugins: {
title: {
display: true,
text: 'Temperature Day'
},
legend: {
display: true,
}
},
scales: {
x: {
display: true,
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'dd MMM yy',
},
},
title: {
display: true,
text: 'Data observations'
}
},
y: {
display: true,
title: {
display: true,
text: 'Temperature (˚C)'
},
suggestedMin: -10,
suggestedMax: 50
}
}
};

此图表生成正确，但日期信息显示错误。来自数据库的数据是ISO8601格式的，但是它们没有显示在地图上，如下图所示。我的第一个温度数据是天&日期"; "2021-07-25T00:00:00.000Z"，但图表显示"日期"; "2021-07-26T00:00:00.000Z"

Image1

Answer 1

问题在于您的区域设置。下面是一个很好的小提琴来演示这个问题:小提琴

给出的起始日期是2021-11-16T00:00:00.000-22:00，但图表上的第一项显示的是第二天的午夜。这是因为我们给出了"-22:00"区域设置到我们的日期解析器。如果你给它"-08:00"我们在同一天早上8点，所以我们更接近正确的值。如果我没有给解析器语言环境，我会自动得到正确的语言环境，但我猜你需要手动给出正确的语言环境，或者你在机器上设置了错误的语言环境。