如何基于ChartJS实现5天3小时预报天气面积图，x轴显示12小时制时间

完整HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温度面积图</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Poppins');
        * {
            font-family: 'Poppins', sans-serif;
        }
        #chart {
            max-width: 760px;
            margin: 35px auto;
            opacity: 0.9;
        }
    </style>
    <!-- 引入ChartJS和日期适配器 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
    <div class="border border-primary m-3">
        <div class="row">
            <div class="col-8" id="chart">
                <canvas id="tempChart"></canvas>
            </div>
        </div>
    </div>
    <script>
        fetch('https://api.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=fd3150a661c1ddc90d3aefdec0400de4')
        .then(response => response.json())
        .then(response => {
            // 格式化数据为{x:时间, y:温度}结构
            const chartData = response.list.map(item => {
                return {
                    x: new Date(item.dt_txt),
                    y: item.main.temp
                }
            });

            const ctx = document.getElementById('tempChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [{
                        label: '温度',
                        data: chartData,
                        fill: true, // 开启填充实现面积图效果
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        tension: 0.4, // 平滑曲线
                        pointRadius: 2
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'hour',
                                stepSize: 3, // 3小时间隔
                                // 12小时制显示格式，带AM/PM，需要显示日期的话改成'MM/dd hh:mm a'
                                displayFormats: {
                                    hour: 'hh:mm a'
                                }
                            },
                            title: {
                                display: true,
                                text: '时间'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: '温度(开尔文)'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    }
                }
            });
        })
    </script>
</body>
</html>

关键配置说明 #

• 必须引入chartjs-adapter-date-fns依赖，否则ChartJS的time类型x轴无法正常解析时间格式
• x轴stepSize: 3配置实现每3小时显示一个刻度
• 时间格式里hh代表12小时制的小时数，加上a后缀就会自动显示AM/PM标识，符合12小时制的展示需求
• 给line类型的数据集设置fill: true即可实现面积图效果，调整tension参数可以控制曲线平滑度

内容的提问来源于stack exchange，提问作者Didarul Amin