ChartJS 生成日期格式答案

【问题标题】：ChartJS Generate Date FormatChartJS 生成日期格式
【发布时间】：2021-10-09 09:40:51
【问题描述】：

我正在使用 ChartJS 生成温度图，其中 X 轴是日期。但我无法正确格式化 YYYY/MM/DD 格式的数据。

我的天气数据

"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

【问题讨论】：

如果你能得到答案，你能接受吗？

标签： chart.js react-chartjs react-chartjs-2

【解决方案1】：

问题在于您的语言环境。这是一个很好的小提琴来演示这个问题：fiddle

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

【讨论】：