Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

内核密度估计是一种有用的统计方法，用于估计随机变量分布的总体形状。换句话说，核密度估计（也称为KDE）可帮助我们“平滑”和探索不遵循任何典型概率密度分布（例如正态分布，二项式分布等）的数据。

在本教程中，我们将向您展示如何在Javascript中创建交互式内核密度估计并使用Highcharts库绘制结果。

让我们首先探索KDE图；然后我们将深入研究代码。

下面的演示显示了随机数据集的高斯核密度估计：

此图表帮助我们估计随机数据集的概率分布，并且我们可以看到数据主要集中在图表的开始和结尾。 基本上，对于每个红色数据点，我们用橙色绘制一个高斯核函数，然后将所有核函数求和在一起，以蓝色创建密度估计值（请参见demo）：

顺便说一下，有很多内核函数类型，例如高斯，统一，Epanechnikov等。我们使用的是高斯内核，因为它提供了平滑的模式。
高斯核的数学表示为：

现在，您对内核密度估计的外观有了一个想法，让我们看一下其背后的代码。 代码中有四个主要步骤： 创建高斯核函数。 处理密度估计点。 处理内核点。 绘制整个数据点。

高斯核函数

以下代码表示高斯内核函数： function GaussKDE(xi, x) { return (1 / Math.sqrt(2 * Math.PI)) * Math.exp(Math.pow(xi - x, 2) / -2); } 其中x表示主要数据（观测值），xi表示绘制内核的范围和密度估计函数。在我们的情况下，xi范围是88到107，以确保覆盖93到102的观测数据范围。

密度估算点

以下循环使用GaussKDE()数组表示的函数和范围创建密度估计点

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

内核点

仅当您想要显示内核点（橙色图表）时才需要执行此步骤。否则，您已经对密度估算步骤很满意。这是处理每个内核的数据点的代码： //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]]); } } 基本上，此循环仅是将范围添加xiData到kernel在密度估计步骤中已处理的每个阵列。

绘制点

处理完所有数据点后，就可以使用Highcharts渲染系列了。密度估计和核是样条图类型，而观测值则绘制为散点图： 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] },... ] }); 现在，您准备使用核密度估计图的功能来探索自己的数据。 随时在下面的评论部分中分享您的评论或问题。

本文章转载自【慧都科技】。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果