创建6月份北京市高低温区间图表｜Highcharts 面积折线图示列讲解

原创于 2026-07-20 08:07:04 发布 · 381 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

案例图表结合区间面积图与折线展示2026年6月北京逐日气温：半透明色块代表当日最低、最高气温波动区间，折线标记每日平均气温；色块宽度越大，代表当日昼夜温差越大。本月无35℃以上高温天气，整体气温较常年同期偏低。

数据说明

依据北京市气象局公开信息：2026 年 6 月北京整月无高温（最高均低于 35℃），全月平均气温 24℃，夜间最低多在 18–22℃，阴雨天气昼夜温差缩小，晴天温差拉大；整理 30 日逐日最低温、最高温、平均气温，贴合真实气候特征。

完整HTLM代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2026年6月北京气温变化图</title>
<!-- 全套依赖 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure {
    min-width: 320px;
    max-width: 960px;
    margin: 20px auto;
}
#container {
    height: 560px;
}
.highcharts-description {
    color: #444;
    margin: 8px 10px;
    font-size: 14px;
}
</style>
</head>
<body>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        图表结合区间面积图与折线展示2026年6月北京逐日气温：半透明色块代表当日最低、最高气温波动区间，折线标记每日平均气温；色块宽度越大，代表当日昼夜温差越大。本月无35℃以上高温天气，整体气温较常年同期偏低。
    </p>
</figure>

<script>
function createChart(ranges, averages) {
    Highcharts.chart('container', {
        title: {
            text: '2026年6月北京气温变化走势',
            align: 'left'
        },
        subtitle: {
            text: '数据来源：北京市气象观测站',
            align: 'left'
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: '日期'
            },
            accessibility: {
                rangeDescription: '时间范围：2026年6月1日 至 2026年6月30日'
            }
        },
        yAxis: {
            title: {
                text: '气温（℃）'
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: ' ℃'
        },
        plotOptions: {
            series: {
                pointStart: '2026-06-01',
                pointIntervalUnit: 'day'
            }
        },
        series: [{
            name: '平均气温',
            data: averages,
            zIndex: 1,
            marker: {
                fillColor: 'var(--highcharts-background-color)',
                lineWidth: 2,
                lineColor: null
            }
        }, {
            name: '气温波动区间（最低~最高）',
            data: ranges,
            type: 'arearange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: '#4285F4',
            fillOpacity: 0.3,
            zIndex: 0,
            marker: {
                enabled: false
            }
        }]
    });
}

// ranges 每组：[当日最低气温，当日最高气温]
const ranges = [
    [20,34.8],[21,33],[20,31],[19,29],[18,28],
    [17,27],[19,31],[18,30],[19,30],[20,32],
    [18,32.6],[19,32.6],[20,32],[19,32],[20,32.9],
    [21,33],[20,31],[21,30],[22,29],[21,28],
    [20,29],[21,29.5],[22,29.3],[21,28],[20,27],
    [19,28],[20,29],[21,29.2],[22,28.5],[21,29.3]
];
// averages 每组：[当日平均气温]
const averages = [
    [27.4],[27],[25.5],[24],[23],
    [22],[25],[24],[24.5],[26],
    [25.3],[25.8],[26],[25.5],[26.4],
    [27],[25.5],[25.5],[25.5],[24.5],
    [24.5],[25.2],[25.6],[24.5],[23.5],
    [23.5],[24.5],[25.1],[25.2],[25.2]
];

createChart(ranges, averages);
</script>
</body>
</html>