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

點擊下載Highcharts最新試用版

在本教程中，我們將向您展示如何使用Area Spline圖表類型創(chuàng)建多個密度圖，也稱為脊線圖。從下面的演示中您將看到，輸出結(jié)果看起來不像我們的“默認”區(qū)域樣條圖演示，但是這里是Highcharts真正擅長的地方：盡管99％的用例可以滿足于在所有默認情況下運行我們的圖表設(shè)置，通過檢查API并考慮您想要數(shù)據(jù)故事的內(nèi)容以及如何最好地對此數(shù)據(jù)進行預(yù)處理，可以帶來很多樂趣。

在本教程中，我們將繼續(xù)這樣做，繼續(xù)探索超級有用的內(nèi)核密度估計。在先前的教程中，我們使用了高斯核函數(shù)來創(chuàng)建單個密度圖和小提琴圖類型。您可能會問：“等等，小提琴圖和密度圖在本質(zhì)上是不是同一張圖？” 你會是對的。密度圖基本上是從中間分開的小提琴圖，其中僅使用一半。即使是一半大小，密度圖也不會丟失任何信息，因為小提琴的左側(cè)和右側(cè)只是彼此的鏡像。

那么，什么時候使用小提琴或密度圖？兩種圖表類型均用于可視化數(shù)據(jù)分布及其概率密度。兩張圖表的形狀在較低的密度值時會更亮，而在較高的密度值時會更厚。盡管它們都可以用于顯示相同的數(shù)據(jù)，但是您可以考慮使用密度圖來實現(xiàn)緊湊而直接的數(shù)據(jù)分布可視化。使用小提琴圖顯示具有描述性統(tǒng)計系數(shù)的誘人的密度分布。

下面的演示顯示了六個學科的2012年奧運會男運動員的體重密度：

function processDensity(step, precision, densityWidth, ...args) {
  …
  return {
    xiData,
    results,
    stat
  };
}

• step是最小數(shù)據(jù)集單位。該步驟用于對數(shù)據(jù)集進行采樣并創(chuàng)建KDE。
• precision 用于細化末端的密度圖，在細點處，此參數(shù)越小，表示在末端和圖表上的細點處獲得的點越多。
• densityWidth用于加寬密度。此參數(shù)應(yīng)等于1以反映KDE值的結(jié)果。但是，出于可見性目的，您可以自由更改，densityWidth以獲取更寬的可見形狀。
• args是一個或多個表示數(shù)據(jù)集的數(shù)組。在我們的案例中，args是四組重量級運動員，每個學科一組。

let step = 1,
  precision = 0.00000000001,
  width = 15;
let data = processDensity(
  step,
  precision,
  width,
  dataArray[0], //triathlon,
  dataArray[1], //badminton,
  dataArray[2], //fencing,
  dataArray[3], //rowing,
  dataArray[4], //handball,
  dataArray[5], //cycling,
  dataArray[6] //gymnastics
);

• xiData 是使用運動員體重數(shù)據(jù)的步長和范圍生成的xAxis數(shù)據(jù)。
• results 包括所有密度圖數(shù)據(jù)。
• stat 是具有所有描述性統(tǒng)計系數(shù)的數(shù)組。

為了使數(shù)據(jù)可視化，使用了一個areasplinerange類型圖，因為processDensity()返回的是根據(jù)areasplinerange格式返回的數(shù)據(jù)數(shù)組結(jié)果。

  Highcharts.chart("container", {
        chart: {
          type: "areasplinerange",
          …

events: {
  render() {
    if (!redrawing) {
      redrawing = true;

      this.series.forEach((s) => {
        s.update({
          fillColor: {
            linearGradient: [0, 0, this.plotWidth, 0],
            stops: [
              [0, Highcharts.color("yellow").setOpacity(0).get("rgba")],
              [0.25, "orange"],
              [0.5, "red"],
              [0.6, "purple"]
            ]
          }
        });
      });
      redrawing = false;
    }
  }
}