Highcharts 散点图（Scatter Chart）详解
Highcharts 的散点图是最适合展示两个数值变量之间关系（如相关性、分布、聚类、异常值检测）的图表类型。每个数据点用一个标记（默认圆点）表示，支持自定义标记形状、大小、颜色，并可轻松扩展为气泡图展示第三维度。
1. 基本散点图完整示例（多系列 + 缩放）
<!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: 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'
},
title: {
text: '学生身高与体重关系散点图',
style: { fontSize: '20px', fontWeight: 'bold' }
},
subtitle: {
text: '蓝色：男生 | 红色：女生（模拟数据 n=120）'
},
xAxis: {
title: { text: '身高 (cm)' },
gridLineWidth: 1,
min: 145,
max: 205
},
yAxis: {
title: { text: '体重 (kg)' },
min: 35,
max: 110
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '身高：{point.x} cm<br>体重：{point.y} kg'
},
plotOptions: {
scatter: {
marker: {
radius: 6,
states: {
hover: {
radiusPlus: 5,
lineWidthPlus: 2
}
}
},
jitter: { // 轻微随机偏移，避免点完全重叠
x: 0.08,
y: 0.08
}
}
},
series: [{
name: '男生',
color: '#7cb5ec',
marker: { symbol: 'circle' },
data: [
[168,62],[172,68],[175,72],[178,78],[180,82],
[182,85],[185,88],[188,92],[170,65],[173,70],
[176,74],[179,79],[181,83],[184,87],[187,91],
// ... 可继续添加更多数据
]
}, {
name: '女生',
color: '#ff7f7f',
marker: { symbol: 'triangle' },
data: [
[158,48],[160,50],[162,52],[165,55],[168,58],
[155,45],[163,53],[167,57],[170,60],[159,49],
[161,51],[164,54],[166,56],[169,59],[157,47]
// ... 更多数据
]
}]
});
</script>
</body>
</html>2. 常用标记形状（symbol）选项
在 marker.symbol 中可设置：
'circle'（默认）'square''diamond''triangle''triangle-down'
示例：不同组别使用不同形状区分。
3. 添加回归趋势线（最常见需求）
Highcharts 原生不提供自动回归，但可手动添加一条 line 系列作为趋势线：
// 示例趋势线数据（实际可通过数学计算得出）
var trendData = [[150, 40], [200, 100]];
series: [
// ... 你的散点系列
{
type: 'line',
name: '线性趋势线',
data: trendData,
marker: { enabled: false },
dashStyle: 'Dash',
color: '#333333',
lineWidth: 2,
enableMouseTracking: false, // 不显示 tooltip
zIndex: 100
}
]4. 扩展为气泡图（展示第三维度）
只需引入 highcharts-more.js 并改为 type: 'bubble'：
<script src="https://code.highcharts.com/highcharts-more.js"></script>chart: { type: 'bubble', zoomType: 'xy' },
series: [{
data: [
{ x: 170, y: 65, z: 25 }, // z 值越大，气泡越大
{ x: 175, y: 75, z: 40 },
// ...
]
}]5. 常用配置速查表
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | 'scatter' |
chart.zoomType | 'xy'（大数据量或密集点时必开） |
plotOptions.scatter.marker | radius、symbol、states（自定义点样式） |
plotOptions.scatter.jitter | { x: 0.05~0.1, y: 0.05~0.1 }（避免点重叠） |
series.color / marker.symbol | 区分不同组别 |
6. 适用场景总结
- 相关性分析（身高-体重、温度-销量、价格-满意度）
- 异常点检测
- 聚类展示（不同颜色/形状区分类别）
- 与气泡图结合展示第三维度（如销量、人口）
如果你需要：
- 大量数据点（上千点）的性能优化（引入 boost 模块）
- 自动计算并显示回归线方程
- 动态添加散点（实时轨迹）
- 与箱线图（boxplot）组合展示分布
请告诉我具体需求，我可以提供完整可运行的代码示例！
