异常教程

Highcharts 散点图（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在数据可视化领域，Highcharts 散点图凭借其直观的二维坐标展示能力，成为分析变量间关系的重要工具。无论是探索温度与销售量的关联，还是研究身高与体重的分布模式，散点图都能以简洁的视觉语言传递复杂信息。对于编程初学者和中级开发者而言，掌握这一技能不仅能提升数据分析能力，还能为项目增添专业度。本文将从零开始，系统讲解如何利用 Highcharts 构建散点图，结合实战案例与配置技巧，帮助读者快速上手这一功能强大的图表库。

一、Highcharts 散点图的核心概念与数据结构

1.1 什么是散点图？

散点图（Scatter Plot）是一种通过二维坐标系中的点阵，展示两个变量之间关系的图表类型。每个数据点代表一个观测值，其 X 轴和 Y 轴坐标分别对应两个数值型变量。例如，可以将“用户年龄”作为 X 轴，“月消费金额”作为 Y 轴，通过散点的分布判断两者是否存在正相关或负相关趋势。

形象比喻：想象你站在一个巨大的棋盘上，每个棋子的位置由 X 和 Y 坐标决定，而散点图就像记录了所有棋子的分布情况，帮助你快速识别规律。

1.2 数据结构与格式要求

Highcharts 的散点图数据需遵循以下格式：

data: [  
  [x1, y1],  
  [x2, y2],  
  // ...  
]

每个子数组代表一个数据点的坐标，X 值和 Y 值均为数值类型。例如，若分析某城市房价与面积的关系，数据可能如下：

[  
  [60, 300000], // 面积60㎡，价格30万元  
  [90, 450000],  
  [120, 600000]  
]

关键提示：若需为每个点添加额外信息（如颜色或标签），可扩展数据格式为对象形式：

data: [  
  { x: 60, y: 300000, color: 'red' },  
  { x: 90, y: 450000, name: '中位数' }  
]

二、从零构建 Highcharts 散点图：基础配置步骤

2.1 环境准备与基本代码框架

使用 Highcharts 需先引入其核心库文件。对于初学者，推荐通过 CDN 引入：

<script src="https://code.highcharts.com/highcharts.js"></script>  
<script src="https://code.highcharts.com/modules/exporting.js"></script>

随后在 HTML 中定义一个容器（如 div 元素）：

<div id="container" style="width: 100%; height: 400px;"></div>

2.2 配置图表的核心选项

通过 JavaScript 初始化 Highcharts 实例，配置散点图的关键参数：

Highcharts.chart('container', {  
  chart: {  
    type: 'scatter' // 指定图表类型为散点图  
  },  
  title: {  
    text: '房价与面积关系分析'  
  },  
  xAxis: {  
    title: { text: '面积（㎡）' },  
    min: 0  
  },  
  yAxis: {  
    title: { text: '价格（万元）' },  
    min: 0  
  },  
  series: [{  
    name: '房产数据',  
    data: [  
      [60, 300],  
      [90, 450],  
      [120, 600]  
    ]  
  }]  
});

2.3 核心配置项详解

属性名作用说明
type必须设为 scatter，定义图表类型
xAxis.title设置 X 轴标题，增强图表可读性
series.data存储数据点坐标，支持数组或对象格式
plotOptions定义数据点样式（如颜色、大小、形状等）

三、进阶配置：让散点图更专业

3.1 自定义数据点样式

通过 plotOptions.scatter 可调整数据点的视觉效果：

plotOptions: {  
  scatter: {  
    marker: {  
      radius: 8, // 点的半径  
      fillColor: 'white',  
      lineWidth: 2,  
      lineColor: '#003399' // 边框颜色  
    }  
  }  
}

3.2 添加趋势线与回归分析

利用 series 的 type 属性添加趋势线，直观展示变量间的相关性：

series: [  
  { // 原始散点数据  
    type: 'scatter',  
    data: [[60, 300], [90, 450], [120, 600]]  
  },  
  { // 趋势线，类型设为 line  
    type: 'line',  
    name: '趋势线',  
    data: [[60, 300], [120, 600]], // 手动或通过计算生成  
    lineWidth: 2,  
    color: '#FF0000'  
  }  
]

3.3 响应式设计与交互功能

通过 responsive 配置适配不同屏幕尺寸，并添加悬停提示：

responsive: {  
  rules: [{  
    condition: {  
      maxWidth: 600  
    },  
    chartOptions: {  
      yAxis: { title: { text: '价格' } }, // 简化标题  
      legend: { enabled: false }  
    }  
  }]  
},  
tooltip: {  
  headerFormat: '<b>面积：{point.x}㎡</b><br>',  
  pointFormat: '价格：{point.y}万元'  
}

四、实战案例：分析用户行为数据

4.1 案例背景

假设我们需分析某电商平台用户的“浏览时长”与“购买转化率”之间的关系，数据如下：
| 用户ID | 浏览时长（分钟） | 转化率（%） |
|--------|------------------|-------------|
| U001 | 5 | 12 |
| U002 | 15 | 28 |
| U003 | 25 | 45 |
| U004 | 35 | 60 |

4.2 完整代码实现

Highcharts.chart('container', {  
  chart: { type: 'scatter' },  
  title: { text: '用户行为分析：浏览时长 vs 转化率' },  
  xAxis: {  
    title: { text: '浏览时长（分钟）' },  
    min: 0,  
    max: 40  
  },  
  yAxis: {  
    title: { text: '转化率（%）' },  
    max: 70  
  },  
  series: [{  
    name: '用户数据',  
    data: [  
      [5, 12],  
      [15, 28],  
      [25, 45],  
      [35, 60]  
    ],  
    marker: {  
      radius: 10,  
      symbol: 'triangle' // 改为三角形图标  
    }  
  }, {  
    type: 'line',  
    name: '线性回归',  
    data: [[5, 12], [35, 60]], // 假设线性关系  
    dashStyle: 'Dash' // 虚线样式  
  }]  
});

4.3 效果分析

通过此图表，可直观看出：

  • 浏览时长与转化率呈明显正相关
  • 当浏览时长超过 30 分钟时，转化率增速放缓

五、常见问题与解决方案

5.1 如何调整坐标轴范围？

通过 xAxis.min/max 或 yAxis.min/max 设置轴范围，例如：

xAxis: { min: 0, max: 100 }, // 强制 X 轴范围为 0-100

5.2 如何处理大量数据点重叠问题？

可通过以下方式优化：

  • 减少点的半径：marker.radius: 3
  • 使用透明度：marker.fillColor: 'rgba(0, 100, 200, 0.5)'
  • 启用数据分箱：turboThreshold: 0（禁用性能优化机制）

5.3 如何动态更新数据？

通过 chart.series[0].setData(newData) 方法重新渲染图表，例如：

// 假设通过 API 获取新数据  
function updateData() {  
  const newData = [[65, 350], [95, 500]];  
  chart.series[0].setData(newData);  
}

六、结论与扩展方向

Highcharts 散点图凭借其灵活的配置能力和强大的交互功能，已成为数据分析师和开发者的得力工具。通过本文的学习，读者应能掌握从基础配置到进阶定制的完整流程，并能结合业务需求设计出专业级可视化方案。

对于希望进一步提升技能的开发者，可探索以下方向：

  • 结合 Highstock 库实现时间序列散点图
  • 使用 Highmaps 将散点图与地理信息结合
  • 通过 exporting 模块实现图表导出功能

数据可视化的终极目标是“让数据说话”，而散点图正是这一目标的有力表达方式。掌握其精髓，你将能更高效地从数据中挖掘价值，并为决策提供直观依据。

最新发布

查看更多文章