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

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

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年奥运会十大最受欢迎学科的运动员的身高和体重：

即使我使用不同的颜色，也很难从这样的图表中获得洞察力，因为数据集相互重叠。

可以解决散布图混乱的另一个选择是聚类散布图。但就我们的情况而言，有如此多的数据点序列，聚集散点图并没有太大帮助。

克服这一挑战的另一种方法是，例如，使用线性回归为每个学科使用数学表示或模型（请参见下图）：

使用折线图（数学模型）而不是散点图，该图表看起来更加简洁。我将散点图选项保留在同一张图表上，以便在各学科之间进行更多的探索和比较。

该解决方案的另一个好处是，该图表现在对可访问性友好，因为更容易查看整个系列的模式。

使用线性回归的一个主要缺点是它是模型，而不是实际表示。该模型只是代表测量值的最佳直线。另一个缺点是线性回归对异常值高度敏感。

我希望这能教给您一些有关如何通过统计分析最好地准备数据，以及如何将结果与适当的图表类型结合以从数据中获得最佳结果的知识。

想要购买Highcharts正版授权的朋友可以咨询官方客服

标签：