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正版授權的朋友可以