Highcharts 散点图（Scatter Chart）详解
Highcharts 的散点图是最经典的用于展示两个数值变量之间关系（如相关性、分布、聚类、异常值）的图表类型。每个数据点用一个标记表示，默认是圆点，支持自定义形状、大小、颜色，并支持缩放、抖动（jitter）避免重叠等高级功能。
1. 基本散点图完整示例（支持缩放 + 多系列）
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>Highcharts 散点图示例</title><scriptsrc="https://code.highcharts.com/highcharts.js"></script></head><body><divid="container"style="width:900px;height:600px;margin:50px auto;"></div><script>Highcharts.chart('container',{chart:{type:'scatter',// 关键：设置为 'scatter'zoomType:'xy',// 支持 X/Y 轴同时拖拽缩放（强烈推荐）panning:true,// 允许平移panKey:'shift',// 按住 Shift 拖动backgroundColor:'#f8f9fa',borderRadius:8},title:{text:'身高与体重关系散点图',style:{fontSize:'22px',fontWeight:'bold'}},subtitle:{text:'蓝色圆点：男生 | 红色三角：女生（模拟数据 n≈200）'},xAxis:{title:{text:'身高 (cm)'},gridLineWidth:1,min:140,max:200,startOnTick:true,endOnTick:true},yAxis:{title:{text:'体重 (kg)'},min:30,max:120},tooltip:{headerFormat:'<b>{series.name}</b><br>',pointFormat:'身高：{point.x} cm<br>体重：{point.y} kg'},plotOptions:{scatter:{marker:{radius:6,states:{hover:{radiusPlus:6,lineWidthPlus:2}}},jitter:{// 关键：轻微随机偏移，避免大量点重叠x:0.1,y:0.1}}},series:[{name:'男生',color:'#7cb5ec',marker:{symbol:'circle'},data:[[165,58],[168,62],[170,65],[172,68],[175,72],[178,76],[180,80],[182,84],[185,88],[188,92],[170,64],[173,69],[176,73],[179,78],[181,82],[183,86],[186,90],[189,94],[171,66],[174,70]// 可继续添加更多数据]},{name:'女生',color:'#ff7f7f',marker:{symbol:'triangle'},data:[[155,45],[158,48],[160,50],[162,52],[165,55],[168,58],[170,60],[172,62],[175,65],[178,68],[156,46],[159,49],[161,51],[163,53],[166,56],[169,59],[171,61],[173,63],[176,66],[177,67]// 更多数据]}]});</script></body></html>2. 常用标记形状（symbol）
'circle'（默认圆点）'square'（方块）'diamond'（菱形）'triangle'（三角）'triangle-down'（倒三角）
可为不同系列设置不同形状，便于区分组别。
3. 添加回归趋势线（最常见需求）
Highcharts 原生不自动计算回归线，但可以手动添加一条 line 系列作为趋势线：
// 示例趋势线数据（实际项目中可用最小二乘法计算）vartrendLine=[[145,35],[200,110]];series:[// ... 你的散点系列{type:'line',name:'趋势线',data:trendLine,marker:{enabled:false},dashStyle:'Dash',color:'#333333',lineWidth:2,enableMouseTracking:false,// 不显示 tooltipzIndex:5}]4. 扩展为气泡图（展示第三维度）
只需引入highcharts-more.js并改为type: 'bubble'：
<scriptsrc="https://code.highcharts.com/highcharts-more.js"></script>chart:{type:'bubble',zoomType:'xy'},series:[{data:[{x:170,y:65,z:30},// z 值控制气泡大小{x:175,y:75,z:45},// ...]}]5. 常用配置速查表
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | 'scatter' |
chart.zoomType | 'xy'（数据密集时必开） |
plotOptions.scatter.marker | radius、symbol、states（自定义点样式） |
plotOptions.scatter.jitter | { x: 0.05~0.15, y: 0.05~0.15 }（避免重叠） |
series.color/marker.symbol | 区分不同组别 |
6. 适用场景
- 相关性分析（身高-体重、温度-销量、价格-满意度）
- 异常点检测
- 聚类可视化（不同颜色/形状区分类别）
- 与气泡图结合展示第三维度（如人口、销量）
如果你需要：
- 大量数据点（上千点）的性能优化（boost 模块）
- 自动计算回归线并显示方程
- 动态实时添加散点（轨迹追踪）
- 与箱线图（boxplot）组合展示分布
告诉我具体需求，我可以提供完整代码示例！
