什么是散点图？一文学会Highcharts散点图的核心特性与3D扩展应用

什么是散点图？

散点图通过在坐标系中绘制一系列独立的点来表示数据，每个点的位置由X轴和Y轴的数值决定，点与点之间默认不连接。

核心定义：

散点图在系列中的每个数据点绘制一个单独的点，而不连接它们。

与折线图的本质区别：

特性	散点图	折线图
数据连接	默认不连接	默认连接
排序要求	无需排序	需要按X轴排序
鼠标追踪	每个点独立触发	依赖线段追踪
适用场景	分布/聚类/相关性	趋势/时间序列

为什么散点图不需要排序？

因为散点图的鼠标追踪器是在每个独立的标记点上激活的，点与点之间没有连线依赖。这意味着你可以直接传入原始数据，无需在前后端进行排序处理，大大简化了数据准备工作。

二、快速上手：

第一个散点图

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts散点图示例</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 800px; height: 500px;"></div>
    
    <script>
        Highcharts.chart('container', {
            chart: {
                type: 'scatter'
            },
            title: {
                text: '身高与体重相关性分析'
            },
            subtitle: {
                text: '来源：样本数据集'
            },
            xAxis: {
                title: { text: '身高 (cm)' },
                startOnTick: true,
                endOnTick: true
            },
            yAxis: {
                title: { text: '体重 (kg)' }
            },
            series: [{
                name: '样本数据',
                data: [
                    [168, 65],  // [x, y]
                    [172, 70],
                    [180, 75],
                    [165, 58],
                    [175, 72],
                    [158, 55],
                    [182, 78],
                    [170, 68]
                ],
                marker: {
                    radius: 6,
                    symbol: 'circle'
                },
                tooltip: {
                    pointFormat: '身高: {point.x} cm<br/>体重: {point.y} kg'
                }
            }]
        });
    </script>
</body>
</html>

散点图的特性

散点系列和折线系列的一个重要区别在于，散点系列不需要排序，因为每个标记点的鼠标追踪器会在悬停时激活。通过将线宽选项设置为大于0的值，可以在标记点之间绘制折线。

有关散点图选项的概述，请参阅 $API reference$ (https://api.highcharts.com/highcharts/plotOptions.scatter).

3D散点图

在三维图表中，散点也具有 Z 维度。这由另一种系列类型 $scatter3D$ (https://api.highcharts.com/highcharts/plotOptions.scatter3d) 处理。

处理大规模数据

当数据量较大时（超过1000点），建议进行性能优化：

javascript 复制代码

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'  // 启用缩放
    },
    plotOptions: {
        scatter: {
            turboThreshold: 2000,  // 默认1000，可适当提高
            marker: {
                radius: 2,         // 减小点的大小
                states: {
                    hover: {
                        radius: 4
                    }
                }
            }
        }
    },
    series: [{
        data: largeDataset,  // 上万条数据
        color: 'rgba(100, 150, 200, 0.5)'  // 使用透明度避免重叠
    }]
});

散点图 vs 折线图：选型指南

你的需求	推荐图表	原因
展示随时间变化的趋势	折线图	强调数据的前后连接关系
分析两个变量的相关性	散点图	关注整体分布和聚类
既有趋势又想看离散度	散点图+连线	兼顾两者
数据点密集，看分布规律	散点图	可设置透明度避免重叠
三维数据展示	3D散点图	多一个维度表达信息

最佳实践总结：

小数据集（<100点）：突出每个点的细节
中数据集（100-1000点）：适当优化性能
大数据集（>1000点）：启用缩放、使用透明度、减小点的大小
需要三维展示：使用Scatter3D，合理设置视角