核心功能说明图表类型平滑曲线图spline完美展示积雪深度随时间的变化趋势X 轴日期时间轴只显示日。月格式无冗余年份刻度按周划分Y 轴积雪深度米最小值为 0网格线为虚线提升美观度交互提示鼠标悬浮显示冬季名称 具体日期 精确积雪深度数据系列3 个冬季的积雪数据用蓝、绿、红三色区分清晰对比!DOCTYPE html html langzh-CN head meta charsetUTF-8 title挪威 Vikjafjellet 积雪深度/title !-- 引入 Highcharts 核心库 -- script srchttps://code.highcharts.com/highcharts.js/script style #container { width: 100%; height: 700px; margin: 0 auto; } /style /head body div idcontainer/div script Highcharts.chart(container, { chart: { type: spline, // 响应式适配 responsive: true }, title: { text: 挪威 Vikjafjellet 地区积雪深度, style: { fontSize: 18px, fontWeight: bold } }, subtitle: { text: 基于不规则时间数据的积雪深度对比图表 }, xAxis: { type: datetime, // 日期格式化只显示 日.月 例如 05. Nov dateTimeLabelFormats: { day: %e. %b, month: %e. %b, year: }, title: { text: 日期, style: { fontWeight: bold } }, // 自动调整刻度避免重叠 tickInterval: 7 * 24 * 3600 * 1000, labels: { rotation: -45, align: right } }, yAxis: { title: { text: 积雪深度 (米), style: { fontWeight: bold } }, min: 0, gridLineDashStyle: Dash }, tooltip: { // 优化提示框样式 backgroundColor: rgba(255,255,255,0.95), borderWidth: 1, shadow: true, headerFormat: b{series.name}/bbr, pointFormat: {point.x:%e. %b}{point.y:.2f} m }, plotOptions: { series: { marker: { symbol: circle, fillColor: #ffffff, enabled: true, radius: 3, lineWidth: 1.5 }, // 线条宽度 lineWidth: 2.5, // 鼠标悬浮高亮效果 states: { hover: { lineWidth: 3.5 } } } }, // 柔和专业配色 colors: [#3498db, #2ecc71, #e74c3c], // 图例位置优化 legend: { align: center, verticalAlign: top, layout: horizontal, itemMarginTop: 10 }, series: [ { name: 2021-2022 冬季, data: [ [1970-11-05, 0], [1970-11-12, 0.1], [1970-11-21, 0.15], [1970-11-22, 0.19], [1970-11-27, 0.17], [1970-11-30, 0.27], [1970-12-02, 0.25], [1970-12-04, 0.27], [1970-12-05, 0.26], [1970-12-06, 0.25], [1970-12-07, 0.26], [1970-12-08, 0.26], [1970-12-09, 0.25], [1970-12-10, 0.25], [1970-12-11, 0.25], [1970-12-12, 0.26], [1970-12-22, 0.22], [1970-12-23, 0.22], [1970-12-24, 0.22], [1970-12-25, 0.24], [1970-12-26, 0.24], [1970-12-27, 0.24], [1970-12-28, 0.24], [1970-12-29, 0.24], [1970-12-30, 0.22], [1970-12-31, 0.18], [1971-01-01, 0.17], [1971-01-02, 0.23], [1971-01-09, 0.5], [1971-01-10, 0.5], [1971-01-11, 0.53], [1971-01-12, 0.48], [1971-01-13, 0.4], [1971-01-17, 0.36], [1971-01-22, 0.69], [1971-01-23, 0.62], [1971-01-29, 0.72], [1971-02-02, 0.95], [1971-02-10, 1.73], [1971-02-15, 1.76], [1971-02-26, 2.18], [1971-03-02, 2.22], [1971-03-06, 2.13], [1971-03-08, 2.11], [1971-03-09, 2.12], [1971-03-10, 2.11], [1971-03-11, 2.09], [1971-03-12, 2.08], [1971-03-13, 2.08], [1971-03-14, 2.07], [1971-03-15, 2.08], [1971-03-17, 2.12], [1971-03-18, 2.19], [1971-03-21, 2.11], [1971-03-24, 2.1], [1971-03-27, 1.89], [1971-03-30, 1.92], [1971-04-03, 1.9], [1971-04-06, 1.95], [1971-04-09, 1.94], [1971-04-12, 2], [1971-04-15, 1.9], [1971-04-18, 1.84], [1971-04-21, 1.75], [1971-04-24, 1.69], [1971-04-27, 1.64], [1971-04-30, 1.64], [1971-05-03, 1.58], [1971-05-06, 1.52], [1971-05-09, 1.43], [1971-05-12, 1.42], [1971-05-15, 1.37], [1971-05-18, 1.26], [1971-05-21, 1.11], [1971-05-24, 0.92], [1971-05-27, 0.75], [1971-05-30, 0.55], [1971-06-03, 0.35], [1971-06-06, 0.21], [1971-06-09, 0] ] }, { name: 2022-2023 冬季, data: [ [1970-11-03, 0], [1970-11-09, 0], [1970-11-12, 0.03], [1970-11-15, 0], [1970-11-24, 0], [1970-11-27, 0.06], [1970-11-30, 0.05], [1970-12-03, 0.05], [1970-12-06, 0.07], [1970-12-09, 0.09], [1970-12-15, 0.09], [1970-12-18, 0.13], [1970-12-21, 0.17], [1970-12-24, 0.32], [1970-12-27, 0.62], [1971-01-03, 0.60], [1971-01-09, 0.63], [1971-01-12, 0.74], [1971-01-15, 0.80], [1971-01-18, 0.97], [1971-01-21, 0.87], [1971-01-24, 0.98], [1971-01-27, 0.87], [1971-01-30, 0.98], [1971-02-03, 1.09], [1971-02-06, 1.24], [1971-02-09, 1.26], [1971-02-12, 1.21], [1971-02-15, 1.12], [1971-02-18, 1.35], [1971-02-21, 1.65], [1971-02-24, 1.64], [1971-02-27, 1.58], [1971-03-03, 1.55], [1971-03-06, 1.62], [1971-03-09, 1.55], [1971-03-12, 1.69], [1971-03-15, 1.70], [1971-03-18, 1.95], [1971-03-21, 1.91], [1971-03-27, 2.08], [1971-03-30, 2.17], [1971-04-03, 2.09], [1971-04-12, 2.04], [1971-04-15, 1.91], [1971-04-18, 1.93], [1971-04-21, 1.79], [1971-04-24, 1.72], [1971-04-27, 1.79], [1971-05-03, 1.74], [1971-05-06, 1.66], [1971-05-09, 1.56], [1971-05-12, 1.37], [1971-05-15, 1.20], [1971-05-18, 1.18], [1971-05-21, 0.93], [1971-05-24, 0.77], [1971-05-27, 0.63], [1971-05-30, 0.47], [1971-06-03, 0.22], [1971-06-06, 0.0] ] }, { name: 2023-2024 冬季, data: [ [1970-10-10, 0], [1970-11-18, 0.2], [1970-11-21, 0.08], [1970-11-25, 0.60], [1970-12-03, 0.11], [1970-12-06, 0.49], [1970-12-18, 0.38], [1970-12-21, 0.70], [1970-12-25, 0.81], [1970-12-30, 0.77], [1971-01-09, 0.65], [1971-01-12, 0.71], [1971-01-21, 0.86], [1971-01-24, 1.07], [1971-01-27, 1.19], [1971-01-30, 1.12], [1971-02-03, 1.31], [1971-02-06, 1.43], [1971-02-09, 1.33], [1971-02-12, 1.41], [1971-02-15, 1.49], [1971-02-18, 1.46], [1971-02-21, 1.55], [1971-02-24, 1.58], [1971-02-27, 1.61], [1971-03-03, 1.80], [1971-03-06, 1.64], [1971-03-15, 1.66], [1971-03-16, 1.91], [1971-03-21, 1.86], [1971-03-23, 2.08], [1971-03-31, 2.01], [1971-04-11, 1.86], [1971-04-15, 1.82], [1971-04-19, 1.81], [1971-04-25, 1.79], [1971-05-05, 1.43], [1971-05-08, 1.13], [1971-05-12, 0.98], [1971-05-15, 0.71], [1971-05-18, 0.50], [1971-05-21, 0.28], [1971-05-24, 0.09], [1971-05-25, 0.0] ] } ] }); /script /body /html使用方法直接复制全部代码保存为.html文件用任意浏览器打开即可查看图表无需安装任何软件联网状态下自动加载 Highcharts 库总结这是一个基于 Highcharts 的时间序列积雪深度对比图表展示 3 个冬季的积雪变化代码开箱即用包含完整 HTML 结构和样式直接浏览器运行优化了日期显示、视觉样式、交互体验比原始代码更实用美观支持鼠标悬浮查看详细数据响应式适配不同屏幕尺寸