Highcharts 曲线图（Spline Chart）详解
Highcharts 中的曲线图通常指 spline 类型，它是折线图（line）的平滑版本，通过样条曲线（spline）插值让折点之间的连线变得圆滑自然，非常适合展示趋势数据（如气温、股价、流量等）。
1. 基本曲线图示例
以下是一个完整的简单曲线图示例（使用 CDN）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 曲线图示例</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 500px; margin: 50px auto;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'spline', // 关键：指定为 spline 类型
backgroundColor: '#f8f9fa',
borderRadius: 10,
shadow: true
},
title: {
text: '2024年月平均气温变化',
style: { fontSize: '22px', fontWeight: 'bold' }
},
subtitle: {
text: '数据来源：气象局'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月'],
title: { text: '月份' }
},
yAxis: {
title: { text: '温度 (°C)' },
min: -10,
gridLineWidth: 1
},
tooltip: {
shared: true, // 多条曲线共享一个提示框
crosshairs: true, // 显示十字准线
valueSuffix: ' °C'
},
legend: {
align: 'center',
verticalAlign: 'bottom',
borderWidth: 1,
borderRadius: 5
},
plotOptions: {
spline: {
marker: {
radius: 5,
lineColor: '#666666',
lineWidth: 1,
states: {
hover: { enabled: true, radius: 8 }
}
}
}
},
series: [{
name: '北京',
data: [-3.9, -1.2, 5.7, 13.5, 19.9, 24.8, 27.2, 26.1, 20.3, 13.1, 5.6, -1.8],
color: '#FF6B6B',
marker: { symbol: 'circle' }
}, {
name: '上海',
data: [3.9, 4.2, 8.5, 15.2, 20.8, 25.5, 28.1, 27.6, 23.3, 17.2, 10.8, 5.9],
color: '#4ECDC4',
marker: { symbol: 'diamond' }
}]
});
</script>
</body>
</html>复制以上代码保存为 HTML 文件，即可在浏览器中看到两条平滑的曲线图。
2. 曲线图常用配置项说明
| 配置位置 | 配置项 | 说明与推荐值 |
|---|---|---|
chart.type | 'spline' | 必须设置为 spline 才能得到曲线效果 |
plotOptions.spline | marker | 控制数据点标记（大小、形状、悬停效果） |
plotOptions.spline | lineWidth | 曲线粗细，默认 2 |
series.marker.symbol | ‘circle’, ‘square’, ‘diamond’ 等 | 自定义每个系列的数据点形状 |
series.dashStyle | ‘Dash’, ‘Dot’, ‘ShortDash’ 等 | 使曲线变为虚线 |
tooltip.shared | true | 多条曲线时推荐开启，显示所有系列的值 |
chart.animation | true / { duration: 1000 } | 开启动画，让曲线绘制更流畅 |
3. 高级曲线图示例：带阴影、区域填充
series: [{
name: '东京气温',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: '#7cb5ec',
marker: { enabled: false }, // 隐藏数据点
shadow: true,
zoneAxis: 'x', // 分段着色（可选）
zones: [{
value: 5, // 6月前蓝色
color: '#7cb5ec'
}, {
color: '#90ed7d' // 6月后绿色
}],
fillOpacity: 0.2, // 区域填充透明度（配合 areaspline）
}]如果想让曲线下方填充颜色，只需将 type: 'spline' 改为 type: 'areaspline' 即可。
4. 快速切换：line vs spline vs areaspline
type: 'line'→ 直线折线图type: 'spline'→ 平滑曲线图（推荐趋势展示）type: 'areaspline'→ 平滑曲线 + 区域填充
如果你需要：
- 多条曲线对比
- 时间序列（用 datetime 轴）
- 动态更新数据
- 响应式适配移动端
告诉我具体需求，我可以提供针对性的完整代码示例！
