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

點擊下載Highcharts最新試用版

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

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

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

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

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

• step是最小數據集單位。該步驟用于對數據集進行采樣并創建KDE。
• precision 用于細化末端的密度圖，在細點處，此參數越小，表示在末端和圖表上的細點處獲得的點越多。
• densityWidth用于加寬密度。此參數應等于1以反映KDE值的結果。但是，出于可見性目的，您可以自由更改，densityWidth以獲取更寬的可見形狀。
• args是一個或多個表示數據集的數組。在我們的案例中，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 是使用運動員體重數據的步長和范圍生成的xAxis數據。
• results 包括所有密度圖數據。
• stat 是具有所有描述性統計系數的數組。

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

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