开源图表库Highcharts教程：创建密度图

?在本教程中，我们将向您展示如何使用Area Spline图表类型创建多个密度图，也称为脊线图。

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 是具有所有描述性统计系数的数组。

使用该processDensity()功能，一旦生成了每个系列的密度数据，下一步就是渲染数据。

为了使数据可视化，使用了一个areasplinerange类型图，因为processDensity()返回的是根据areasplinerange格式返回的数据数组结果。

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

要创建颜色渐变效果，请使用以下linearGradient选项：

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

一定要使用linearGradient在event了下chart功能; 否则，在不同的屏幕尺寸下，渐变效果将不同。

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买Highcharts正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：