Highcharts 散点图（Scatter Chart）详解
Highcharts 中的散点图（Scatter Chart）用于展示两个变量之间的关系，非常适合显示数据点的分布、相关性、聚类或异常值（如身高与体重、温度与销量等）。它默认使用圆点标记数据点，支持自定义标记形状、大小、颜色等。
主要类型
- scatter：基本散点图
- bubble：气泡图（需引入 highcharts-more.js，第三个维度用气泡大小表示）
- scatter with regression line：散点 + 回归线（需自定义或使用插件）
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'
backgroundColor: '#f8f9fa',
zoomType: 'xy' // 支持鼠标拖拽缩放（非常实用）
},
title: {
text: '学生身高与体重关系散点图',
style: { fontWeight: 'bold', fontSize: '20px' }
},
subtitle: {
text: '数据来源：模拟数据（n=50）'
},
xAxis: {
title: { text: '身高 (cm)' },
startOnTick: true,
endOnTick: true,
showLastLabel: true,
min: 150,
max: 200
},
yAxis: {
title: { text: '体重 (kg)' },
min: 40,
max: 100
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b><br/>' +
'身高: ' + this.x + ' cm<br/>' +
'体重: ' + this.y + ' kg';
}
},
plotOptions: {
scatter: {
marker: {
radius: 6, // 点大小
symbol: 'circle', // 标记形状：circle, square, diamond, triangle 等
states: {
hover: {
enabled: true,
lineColor: '#000',
radius: 9
}
}
},
jitter: { // 轻微抖动，避免点重叠
x: 0.1,
y: 0.1
}
}
},
series: [{
name: '男生',
color: '#7cb5ec',
data: [
[165, 58], [168, 62], [170, 65], [172, 68], [175, 72],
[178, 75], [180, 80], [182, 85], [185, 88], [188, 92],
// ... 更多数据
]
}, {
name: '女生',
color: '#ff7f7f',
data: [
[155, 45], [158, 48], [160, 50], [162, 52], [165, 55],
[168, 58], [170, 60], [172, 62], [175, 65], [178, 68]
// ... 更多数据
]
}]
});
</script>
</body>
</html>2. 多系列 + 自定义标记形状
series: [{
name: '类型A',
marker: { symbol: 'triangle' },
data: [[...]]
}, {
name: '类型B',
marker: { symbol: 'diamond' },
data: [[...]]
}]3. 气泡图（Bubble Chart）——三维数据展示
需额外引入模块：
<script src="https://code.highcharts.com/highcharts-more.js"></script>chart: { type: 'bubble', zoomType: 'xy' },
series: [{
name: '国家数据',
data: [
{ x: 95, y: 75, z: 8500, name: '美国' }, // x: GDP, y: 预期寿命, z: 人口（气泡大小）
{ x: 85, y: 70, z: 1400, name: '中国' },
{ x: 70, y: 65, z: 1200, name: '印度' }
// 数据格式：[x, y, z] 或对象
],
marker: {
fillOpacity: 0.6
}
}]4. 添加回归趋势线（常见需求）
Highcharts 原生不支持趋势线，但可通过添加 line 系列模拟：
// 先计算回归线数据（这里用简单示例，实际可用 math.js 或手动计算）
var regressionData = [[150, 40], [200, 100]]; // 模拟趋势线点
series: [
// ... 散点系列
{
type: 'line',
name: '趋势线',
data: regressionData,
marker: { enabled: false },
dashStyle: 'Dash',
color: '#000000',
enableMouseTracking: false
}
]5. 常用配置总结
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | ‘scatter’（基本散点） / ‘bubble’（气泡图） |
chart.zoomType | ‘xy’（强烈推荐开启，便于查看密集点） |
plotOptions.scatter.marker | radius/symbol/states（自定义点样式） |
plotOptions.scatter.jitter | { x: 0.1, y: 0.1 }（避免点完全重叠） |
tooltip.formatter | 自定义提示内容 |
series.regression | true（需引入 regression 模块实现自动趋势线） |
6. 适用场景对比
| 图表类型 | 适用场景 |
|---|---|
| scatter | 两个变量关系、相关性分析、异常点检测 |
| bubble | 三个变量（x、y、大小）展示，如国家经济数据 |
| line/spline | 时间趋势 |
如果你需要：
- 气泡图完整示例
- 自动回归趋势线（带公式）
- 大数据量散点优化（使用 boost 模块）
- 与箱线图结合
告诉我具体需求，我可以提供完整代码示例！
