散点图也被称为散点图或散布图通常用于展示连续数据的分布情况。Scatter 散点图基础概念1. 定义散点图Scatter Chart以二维平面坐标 (X 轴、Y 轴)中的离散圆点标记一组组(x数值, y数值)数据点用来分析两个连续数值变量之间的相关性、分布规律、聚类、异常离群点。每个圆点 一条样本数据横坐标变量 A纵坐标变量 B额外可扩展圆点大小、颜色映射第三、第四维度数据气泡图 带尺寸的散点图2. 核心作用判断正负相关点整体从左下→右上 正相关左上→右下 负相关散乱无规律 无相关识别数据聚集区、孤立异常值脏数据 / 特殊样本多维可视化X、Y、大小、颜色四维度表达数据对比多组样本分布差异多系列散点3. 适用场景成本 销量、投入 产出、身高体重、测试时长 故障率风控异常检测、产品指标分布、客户价值分层不适合展示趋势变化、占比、单一数值大小对比Highcharts 里散点图通常用series.type scatter并且每个点一般是[x, y]形式的数据。下面是一个Highcharts 散点图完整示例可直接运行下面的数据可视化图表展示了不同项目的运动员分布情况按照身高x 轴和体重y 轴进行分类篮球项目有 284 名运动员铁人三项项目有 109 名参与者排球项目则有 382 名运动员。通过这种散点图形式我们可以立即了解到运动员的分布情况包括那些处于异常范围的运动员。Highcharts.setOptions({ colors: [ #058DC7, #50B432, #ED561B, #DDDF00, #24CBE5, #64E572, #FF9655, #FFF263, #6AF9C4 ] }); const discipline [{ name: Basketball, data: basketball }, { name: Triathlon, data: triathlon }, { name: Volleyball, data: volleyball } ]; async function getData() { const response await fetch( https://www.highcharts.com/samples/data/olympic2012.json ); return response.json(); } getData().then(data { const getData sportName { const temp []; data.forEach(elm { if (elm.sport sportName elm.weight 0 elm.height 0) { temp.push([elm.height, elm.weight]); } }); return temp; }; const series []; discipline.forEach(e { series.push({ name: e.name, data: getData(e.data) }); }); const colors Highcharts.getOptions().colors.map( c Highcharts.color(c).setOpacity(0.5).get() ); Highcharts.chart(container, { chart: { type: scatter, zooming: { type: xy } }, colors, title: { text: Olympics 2012 sport by height and weight }, subtitle: { text: Source: a hrefhttps://www.theguardian.com/sport/datablog/2012/aug/07/olympics-2012-athletes-age-weight-heightThe Guardian/a }, xAxis: { title: { text: Height }, labels: { format: {value} m }, startOnTick: true, endOnTick: true, showLastLabel: true }, yAxis: { title: { text: Weight }, labels: { format: {value} kg } }, legend: { enabled: true }, plotOptions: { scatter: { marker: { radius: 2.5, symbol: circle, states: { hover: { enabled: true, lineColor: rgb(100,100,100) } } }, states: { hover: { marker: { enabled: false } } } } }, tooltip: { pointFormat: Height: {point.x} m br/ Weight: {point.y} kg }, series: series }); } );适合散点图的场景看两个数值变量是否相关找离群点展示分布情况对比大量独立数据点Highcharts 使用三点图的相关说明1. 如果数据量很大可以考虑Boost模块提升性能marker.enabled: false减少渲染压力使用更简单的 tooltip 配置2. 在 Highcharts 里散点图常用chart.type: scatter数据格式通常是[x, y]散点图优缺点总结✅ 优点快速概览数据分布一眼就能看清数据整体的分布形态与聚集区域模式识别直观便于快速发现数据中的规律、趋势与聚类特征易于解读逻辑简单直白非专业人员也能快速理解图表含义异常值一目了然离群点、异常数据在图上非常突出极易识别相关性判断高效能迅速判断两个变量之间是否存在关联关系正相关、负相关或无相关支持大数据量可承载大量数据点适合海量样本的可视化分析通用性强适配性灵活几乎适用于所有连续型数值数据的展示❌ 缺点数据过多易杂乱当数据系列或点位数量过大时点与点重叠拥挤图表可读性会显著下降精准量化分析困难只能做定性的趋势与分布判断要精确计算相关程度、拟合分布规律等结论仍需配合统计方法单凭视觉难以得出准确结论