当前位置：首页 > news >正文

Highcharts 散点图

news 2026/6/13 5:05:58

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`	区分不同组别