Highcharts 曲线图（Spline Chart）详解
Highcharts 中的曲线图通常指spline类型，它是折线图（line）的平滑版本，通过样条曲线（spline）插值让折点之间的连线变得圆滑自然，非常适合展示趋势数据（如气温、股价、流量等）。
1. 基本曲线图示例
以下是一个完整的简单曲线图示例（使用 CDN）：
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>Highcharts 曲线图示例</title><scriptsrc="https://code.highcharts.com/highcharts.js"></script></head><body><divid="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 轴）
- 动态更新数据
- 响应式适配移动端
告诉我具体需求，我可以提供针对性的完整代码示例！
