异常教程

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 作为一款功能强大的 JavaScript 图表库，因其直观的交互性和丰富的图表类型而受到广泛青睐。散点图（Scatter Chart）是 Highcharts 中常用的一种图表，用于展示两个变量之间的关系。然而，仅凭散点图的原始数据点，用户可能难以直观理解数据的趋势或相关性。此时，Highcharts 散点图上添加回归线这一技巧便能派上用场。回归线不仅能帮助用户快速识别数据分布的模式，还能辅助预测未来趋势，是数据分析中不可或缺的工具。本文将从基础概念到代码实现，逐步解析这一技术的原理与实践方法。

一、Highcharts 散点图基础：数据与图表配置

1.1 散点图的核心功能

散点图的核心作用是展示两个变量之间的关系，例如销售额与广告投入、用户年龄与消费金额等。通过将数据点以坐标形式呈现，散点图能直观反映变量间的关联性。在 Highcharts 中，创建散点图的代码框架如下：

Highcharts.chart('container', {  
    chart: {  
        type: 'scatter' // 设置图表类型为散点图  
    },  
    series: [{  
        data: [[10, 20], [20, 30], [30, 40]] // 示例数据：x轴值与y轴值的数组  
    }]  
});

1.2 数据格式与配置项解析

  • 数据格式：每个数据点需以 [x, y] 的二维数组形式表示。例如，[10, 20] 表示 x 轴值为 10，y 轴值为 20。
  • 关键配置项：
    • xAxis.title.text：设置 x 轴标签名称。
    • yAxis.title.text：设置 y 轴标签名称。
    • tooltip：定义鼠标悬停时显示的数据格式。

比喻：将散点图想象成一张“数据地图”，每个点都是地图上的坐标标记，而回归线则是连接这些点的“导航路径”，帮助用户快速理解整体趋势。

二、回归线的核心概念与数学原理

2.1 什么是回归线？

回归线（Regression Line）是统计学中用于描述变量间线性关系的工具。在散点图中，它是一条“最佳拟合”直线，通过最小化所有数据点到该线的垂直距离的平方和来确定。回归线的方程通常表示为：
$$ y = a + bx $$
其中，

  • b 是斜率（Slope），表示 x 每增加一个单位，y 的平均变化量。
  • a 是截距（Intercept），表示当 x=0 时，y 的预期值。

2.2 最小二乘法：回归线的计算逻辑

回归线的斜率和截距通过最小二乘法（Least Squares Method）计算得出。其核心思想是：

  1. 计算所有数据点的 x 均值（$\bar{x}$）和 y 均值（$\bar{y}$）。
  2. 计算分子 $\sum (x_i - \bar{x})(y_i - \bar{y})$ 和分母 $\sum (x_i - \bar{x})^2$，斜率 $b = \frac{\text{分子}}{\text{分母}}$。
  3. 截距 $a = \bar{y} - b\bar{x}$。

比喻：回归线就像一根“弹性橡皮筋”，它被拉伸或压缩，直到所有数据点对它的“拉力”达到平衡状态。

三、在 Highcharts 中添加回归线的两种方法

3.1 方法一：使用 Highcharts 内置的 regression 系列（需扩展插件）

Highcharts 官方并未直接提供回归线功能，但可通过第三方插件（如 highcharts-regression-js）简化实现。以下是核心步骤：

  1. 引入插件：在 HTML 文件中添加插件脚本。

    <script src="https://cdn.jsdelivr.net/npm/highcharts-regression-js@1.2.0/highcharts-regression.min.js"></script>

  2. 配置回归线：在图表配置中启用 regression 系列。

    Highcharts.chart('container', {  
    series: [{  
        type: 'scatter',  
        name: '原始数据',  
        data: [[1, 2], [3, 4], [5, 6]]  
    }, {  
        type: 'regression', // 启用回归线  
        linkedTo: ':previous', // 关联前一个散点图系列  
        name: '回归线',  
        marker: { enabled: false }, // 隐藏标记点  
        color: 'red'  
    }]  
});

3.2 方法二：手动计算回归线数据并添加

若希望完全自主控制回归线的生成逻辑，可手动计算回归系数，并通过 Highcharts 的 line 系列添加线条。以下是具体步骤：

3.2.1 计算回归系数的 JavaScript 函数

function calculateRegression(data) {  
    const xValues = data.map(point => point[0]);  
    const yValues = data.map(point => point[1]);  
    const xMean = xValues.reduce((a, b) => a + b, 0) / xValues.length;  
    const yMean = yValues.reduce((a, b) => a + b, 0) / yValues.length;  

    let numerator = 0;  
    let denominator = 0;  
    data.forEach(point => {  
        const xDiff = point[0] - xMean;  
        const yDiff = point[1] - yMean;  
        numerator += xDiff * yDiff;  
        denominator += xDiff * xDiff;  
    });  
    const slope = numerator / denominator;  
    const intercept = yMean - slope * xMean;  

    // 根据 x 范围生成回归线的两个端点  
    const xMin = Math.min(...xValues);  
    const xMax = Math.max(...xValues);  
    return [  
        [xMin, intercept + slope * xMin],  
        [xMax, intercept + slope * xMax]  
    ];  
}

3.2.2 将回归线数据整合到 Highcharts 配置中

const scatterData = [[1, 2], [2, 4], [3, 5], [4, 6]];  
const regressionData = calculateRegression(scatterData);  

Highcharts.chart('container', {  
    series: [{  
        type: 'scatter',  
        name: '数据点',  
        data: scatterData  
    }, {  
        type: 'line',  
        name: '回归线',  
        data: regressionData, // 使用计算后的回归线数据  
        color: '#FF0000',  
        lineWidth: 2  
    }]  
});

四、实战案例：用 Highcharts 展示身高与体重的回归分析

4.1 数据准备

假设我们有以下身高（cm）与体重（kg）的数据：

const data = [  
    [160, 55], [165, 60], [170, 68], [175, 72],  
    [180, 78], [155, 50], [185, 85]  
];

4.2 完整代码实现

// 计算回归线函数（同上）  

document.addEventListener('DOMContentLoaded', function() {  
    const container = document.getElementById('chart-container');  
    const regressionData = calculateRegression(data);  

    Highcharts.chart(container, {  
        title: { text: '身高与体重的回归分析' },  
        xAxis: {  
            title: { text: '身高（cm）' }  
        },  
        yAxis: {  
            title: { text: '体重（kg）' }  
        },  
        series: [{  
            type: 'scatter',  
            name: '原始数据',  
            data: data  
        }, {  
            type: 'line',  
            name: '回归线',  
            data: regressionData,  
            color: '#0000FF',  
            dashStyle: 'ShortDot' // 设置虚线样式  
        }]  
    });  
});

4.3 结果分析

执行代码后，图表将显示散点图和回归线。回归线的斜率大于 0，表明身高与体重呈正相关。通过观察回归线的倾斜程度，用户可快速判断变量间的关系强度。

五、进阶技巧与常见问题

5.1 自定义回归线样式

通过调整 Highcharts 的配置项，可实现以下效果：

  • 颜色与线型：使用 color 和 dashStyle 自定义线条样式。
  • 透明度：通过 lineWidth 和 lineOpacity 控制线条的粗细与透明度。

5.2 动态更新回归线

若数据动态变化（如通过 API 获取实时数据），可通过 chart.addSeries() 方法重新计算并添加回归线：

const chart = Highcharts.chart(...);  
// 后续更新数据时：  
chart.series[1].remove(); // 移除旧回归线  
const newRegressionData = calculateRegression(newData);  
chart.addSeries({  
    type: 'line',  
    data: newRegressionData  
});

5.3 常见问题与解决方案

问题描述可能原因解决方案
回归线未显示数据格式错误（如非二维数组）检查 regressionData 是否为 [x, y] 的二维数组
线条倾斜方向异常计算回归系数时公式错误重新验证最小二乘法的计算逻辑
图表缩放后线不更新未绑定 redraw 事件在事件监听中重新计算回归线

六、结论：回归线为数据分析注入“洞察力”

通过本文的讲解，读者已掌握在 Highcharts 散点图上添加回归线 的两种方法，并了解其实现背后的数学原理。回归线不仅是数据趋势的“视觉指南”，更是量化分析的“决策助手”。无论是用于学术研究、商业分析，还是个人项目，这一技巧都能帮助用户更高效地从数据中提取价值。

未来，读者可进一步探索：

  1. 尝试非线性回归（如二次曲线）的实现。
  2. 在图表中添加 R² 值（决定系数）以量化回归效果。
  3. 结合 Highcharts 的交互功能，实现回归线的动态交互（如鼠标悬停显示方程）。

数据分析的道路上，每一步“回归”都是对数据本质的更深刻理解。希望本文能成为您探索 Highcharts 功能与统计分析结合的坚实起点。

最新发布

查看更多文章