Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測(cè)量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點(diǎn)擊下載Highcharts最新試用版

備注
Highcharts stock包已經(jīng)內(nèi)置支持先進(jìn)的技術(shù)指標(biāo)，包括線性回歸等。但是，此博客文章重點(diǎn)介紹如何在圖表數(shù)據(jù)上應(yīng)用自定義統(tǒng)計(jì)分析，以及如何使用Highcharts進(jìn)行呈現(xiàn)。

我正在使用JavaScript統(tǒng)計(jì)庫（jStat）進(jìn)行所有統(tǒng)計(jì)上的繁重工作，例如均值，標(biāo)準(zhǔn)差和總體相關(guān)系數(shù)的計(jì)算。

如果您不熟悉線性回歸，這里有個(gè)簡(jiǎn)單的總結(jié)：

線性回歸是最流行的回歸分析技術(shù)。通過探索連續(xù)因變量與連續(xù)或離散自變量之間的關(guān)系（相關(guān)性），它有助于我們進(jìn)行預(yù)測(cè)并找到因果關(guān)系。例如，下面的演示直觀地展示了足球運(yùn)動(dòng)員的體重與2012年奧運(yùn)會(huì)賽事高度之間的關(guān)系：

回歸線（黑線）表示足球運(yùn)動(dòng)員的身高和體重之間的關(guān)系（模型）。

技術(shù)說明：線性回歸由等式 Y = B * X + A表示。B是等于r *（Sy / Sx）的斜率，其中r是相關(guān)系數(shù)，Sy是y值的標(biāo)準(zhǔn)偏差，并且Sx是x值的標(biāo)準(zhǔn)偏差。A的方程（截距）等于均值Y-（B * meanX），其中均值Y和均值X分別是y值和x值的均值。

多虧了jStat庫，我要做的就是編寫幾行代碼來計(jì)算主要的數(shù)學(xué)公式，并使用簡(jiǎn)單的線型來可視化線性回歸：

  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
      };
    }

上一行的數(shù)學(xué)公式為Y = -86.60 + 88.79 * X。相關(guān)系數(shù)或r為0.85，這意味著身高和體重之間存在很強(qiáng)的正相關(guān)關(guān)系。該系數(shù)還有助于我們了解回歸線估計(jì)實(shí)際值（測(cè)量值）的程度。在我們的情況下，r = 0.85，這意味著我們的模型可以很好地表示測(cè)量值。

現(xiàn)在，您對(duì)什么是線性回歸以及如何對(duì)其進(jìn)行可視化有了一個(gè)好主意。讓我們看看如何使用它作為可視化許多數(shù)據(jù)點(diǎn)的智能方法，并且仍然具有易于閱讀的圖表。

以下是包含數(shù)千個(gè)數(shù)據(jù)點(diǎn)的圖表，代表了2012年奧運(yùn)會(huì)十大最受歡迎學(xué)科的運(yùn)動(dòng)員的身高和體重：

即使我使用不同的顏色，也很難從這樣的圖表中獲得洞察力，因?yàn)閿?shù)據(jù)集相互重疊。

可以解決散布圖混亂的另一個(gè)選擇是聚類散布圖。但就我們的情況而言，有如此多的數(shù)據(jù)點(diǎn)序列，聚集散點(diǎn)圖并沒有太大幫助。

克服這一挑戰(zhàn)的另一種方法是，例如，使用線性回歸為每個(gè)學(xué)科使用數(shù)學(xué)表示或模型（請(qǐng)參見下圖）：

使用折線圖（數(shù)學(xué)模型）而不是散點(diǎn)圖，該圖表看起來更加簡(jiǎn)潔。我將散點(diǎn)圖選項(xiàng)保留在同一張圖表上，以便在各學(xué)科之間進(jìn)行更多的探索和比較。

該解決方案的另一個(gè)好處是，該圖表現(xiàn)在對(duì)可訪問性友好，因?yàn)楦菀撞榭凑麄€(gè)系列的模式。

使用線性回歸的一個(gè)主要缺點(diǎn)是它是模型，而不是實(shí)際表示。該模型只是代表測(cè)量值的最佳直線。另一個(gè)缺點(diǎn)是線性回歸對(duì)異常值高度敏感。

 我希望這能教給您一些有關(guān)如何通過統(tǒng)計(jì)分析最好地準(zhǔn)備數(shù)據(jù)，以及如何將結(jié)果與適當(dāng)?shù)膱D表類型結(jié)合以從數(shù)據(jù)中獲得最佳結(jié)果的知識(shí)。

想要購(gòu)買Highcharts正版授權(quán)的朋友可以