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

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

內(nèi)核密度估計(jì)是一種有用的統(tǒng)計(jì)方法，用于估計(jì)隨機(jī)變量分布的總體形狀。換句話說，核密度估計(jì)（也稱為KDE）可幫助我們“平滑”和探索不遵循任何典型概率密度分布（例如正態(tài)分布，二項(xiàng)式分布等）的數(shù)據(jù)。

在本教程中，我們將向您展示如何在Javascript中創(chuàng)建交互式內(nèi)核密度估計(jì)并使用Highcharts庫繪制結(jié)果。

讓我們首先探索KDE圖；然后我們將深入研究代碼。

下面的演示顯示了隨機(jī)數(shù)據(jù)集的高斯核密度估計(jì)：

基本上，對(duì)于每個(gè)紅色數(shù)據(jù)點(diǎn)，我們用橙色繪制一個(gè)高斯核函數(shù)，然后將所有核函數(shù)求和在一起，以藍(lán)色創(chuàng)建密度估計(jì)值（請(qǐng)參見demo）：

現(xiàn)在，您對(duì)內(nèi)核密度估計(jì)的外觀有了一個(gè)想法，讓我們看一下其背后的代碼。
代碼中有四個(gè)主要步驟：

1. 創(chuàng)建高斯核函數(shù)。
2. 處理密度估計(jì)點(diǎn)。
3. 處理內(nèi)核點(diǎn)。
4. 繪制整個(gè)數(shù)據(jù)點(diǎn)。

以下代碼表示高斯內(nèi)核函數(shù)：

function GaussKDE(xi, x) {
  return (1 / Math.sqrt(2 * Math.PI)) * Math.exp(Math.pow(xi - x, 2) / -2);
}

密度估算點(diǎn)

以下循環(huán)使用GaussKDE()數(shù)組表示的函數(shù)和范圍創(chuàng)建密度估計(jì)點(diǎn)

xiData：
//Create the density estimate
for (i = 0; i < xiData.length; i++) {
  let temp = 0;
  kernel.push([]);
  kernel[i].push(new Array(dataSource.length));
  for (j = 0; j < dataSource.length; j++) {
    temp = temp + GaussKDE(xiData[i], dataSource[j]);
    kernel[i][j] = GaussKDE(xiData[i], dataSource[j]);
  }
  data.push([xiData[i], (1 / N) * temp]);
}

僅當(dāng)您想要顯示內(nèi)核點(diǎn)（橙色圖表）時(shí)才需要執(zhí)行此步驟。否則，您已經(jīng)對(duì)密度估算步驟很滿意。這是處理每個(gè)內(nèi)核的數(shù)據(jù)點(diǎn)的代碼：

//Create the kernels
for (i = 0; i < dataSource.length; i++) {
  kernelChart.push([]);
  kernelChart[i].push(new Array(kernel.length));
  for (j = 0; j < kernel.length; j++) {
    kernelChart[i].push([xiData[j], (1 / N) * kernel[j][i]]);
  }
}

繪制點(diǎn)

處理完所有數(shù)據(jù)點(diǎn)后，就可以使用Highcharts渲染系列了。密度估計(jì)和核是樣條圖類型，而觀測(cè)值則繪制為散點(diǎn)圖：

Highcharts.chart("container", {
  chart: {
    type: "spline",
    animation: true
  },
  title: {
    text: "Gaussian Kernel Density Estimation (KDE)"
  },
  yAxis: {
    title: { text: null }
  },
  tooltip: {
    valueDecimals: 3
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false
      },
      dashStyle: "shortdot",
      color: "#ff8d1e",
      pointStart: xiData[0],
      animation: {
        duration: animationTime
      }
    }
  },
  series: [
    {
      type: "scatter",
      name: "Observation",
      marker: {
        enabled: true,
        radius: 5,
        fillColor: "#ff1e1f"
      },
      data: dataPoint,
      tooltip: {
        headerFormat: "{series.name}:",
        pointFormat: "<b>{point.x}</b>"
      },
      zIndex: 9
    },
    {
      name: "KDE",
      dashStyle: "solid",
      lineWidth: 2,
      color: "#1E90FF",
      data: data
    },
    {
      name: "k(" + dataSource[0] + ")",
      data: kernelChart[0]
    },...  ]
});