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

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

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

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

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

下面的演示顯示了六個(gè)學(xué)科的2012年奧運(yùn)會(huì)男運(yùn)動(dòng)員的體重密度：

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

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

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 是使用運(yùn)動(dòng)員體重?cái)?shù)據(jù)的步長(zhǎng)和范圍生成的xAxis數(shù)據(jù)。
• results 包括所有密度圖數(shù)據(jù)。
• stat 是具有所有描述性統(tǒng)計(jì)系數(shù)的數(shù)組。

為了使數(shù)據(jù)可視化，使用了一個(gè)areasplinerange類型圖，因?yàn)閜rocessDensity()返回的是根據(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;
    }
  }
}