Highcharts 散点图（Scatter Chart）详解
Highcharts 的散点图是最经典的用于展示两个数值变量之间关系（如相关性、分布、聚类、异常值）的图表类型。每个数据点用一个标记表示，默认是圆点，支持自定义形状、大小、颜色，并支持缩放、抖动（jitter）避免重叠等高级功能。
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',
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 系列作为趋势线：
// 示例趋势线数据（实际项目中可用最小二乘法计算）
var trendLine = [[145, 35], [200, 110]];
series: [
// ... 你的散点系列
{
type: 'line',
name: '趋势线',
data: trendLine,
marker: { enabled: false },
dashStyle: 'Dash',
color: '#333333',
lineWidth: 2,
enableMouseTracking: false, // 不显示 tooltip
zIndex: 5
}
]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: 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）组合展示分布
告诉我具体需求，我可以提供完整代码示例！
