开源图表库Highcharts教程：线性回归线-控件新闻-慧都网

开源图表库Highcharts教程：线性回归线

翻译|使用教程|编辑：吴园园|2020-04-23 13:30:27.827|阅读 603 次

概述：在本教程中，我们将学习如何计算和绘制线性回归线，并使用它来可视化大量点而不会使图表混乱。我们还将研究线性回归线的局限性。

相关链接：

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版

备注
Highcharts stock包已经内置支持先进的技术指标，包括线性回归等。但是，此博客文章重点介绍如何在图表数据上应用自定义统计分析，以及如何使用Highcharts进行呈现。

我正在使用JavaScript统计库（jStat）进行所有统计上的繁重工作，例如均值，标准差和总体相关系数的计算。

如果您不熟悉线性回归，这里有个简单的总结：

线性回归是最流行的回归分析技术。通过探索连续因变量与连续或离散自变量之间的关系（相关性），它有助于我们进行预测并找到因果关系。例如，下面的演示直观地展示了足球运动员的体重与2012年奥运会赛事高度之间的关系：

回归线（黑线）表示足球运动员的身高和体重之间的关系（模型）。

技术说明：线性回归由等式 Y = B * X + A表示。B是等于r *（Sy / Sx）的斜率，其中r是相关系数，Sy是y值的标准偏差，并且Sx是x值的标准偏差。A的方程（截距）等于均值Y-（B * meanX），其中均值Y和均值X分别是y值和x值的均值。

多亏了jStat库，我要做的就是编写几行代码来计算主要的数学公式，并使用简单的线型来可视化线性回归：

  function (data) {
    function regression(arrWeight, arrHeight) {
      let r, sy, sx, b, a, meanX, meanY;
      r = jStat.corrcoeff(arrHeight, arrWeight);
      sy = jStat.stdev(arrWeight);
      sx = jStat.stdev(arrHeight);
      meanY = jStat(arrWeight).mean();
      meanX = jStat(arrHeight).mean();
      b = r * (sy / sx);
      a = meanY - meanX * b;
      //Set up a line
      let y1, y2, x1, x2;
      x1 = jStat.min(arrHeight);
      x2 = jStat.max(arrHeight);
      y1 = a + b * x1;
      y2 = a + b * x2;
      return {
        line: [
          [x1, y1],
          [x2, y2]
        ],
        r
      };
    }

上一行的数学公式为Y = -86.60 + 88.79 * X。相关系数或r为0.85，这意味着身高和体重之间存在很强的正相关关系。该系数还有助于我们了解回归线估计实际值（测量值）的程度。在我们的情况下，r = 0.85，这意味着我们的模型可以很好地表示测量值。

现在，您对什么是线性回归以及如何对其进行可视化有了一个好主意。让我们看看如何使用它作为可视化许多数据点的智能方法，并且仍然具有易于阅读的图表。

以下是包含数千个数据点的图表，代表了2012年奥运会十大最受欢迎学科的运动员的身高和体重：