开源图表库Highcharts教程：使用密度和抖动图可视化数据分布

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

Highcharts最新试用版

数据点对于男女运动员均很重要。女运动员的体重主要集中在55公斤至60公斤之间，而男运动员的主要体重则在65公斤至75公斤之间，略微在120公斤左右。
正确，您开始看到将这两个图表组合在一起的好处，因为每个图表都可以帮助我们从不同的角度理解数据。让我们深入研究吧/span>

抖动图是可视化连续数据和分类数据之间关系的绝佳选择。数据的呈现方式使我们能够评估数据点的数量，点的散布和分布。但是，如果有大量数据点重叠，则肉眼无法直观地评估分布，这就是密度分布图有效的原因。密度图以相当清晰的方式显示密度分布，而与数据点的数量或重叠情况无关。

如何使用Highcharts创建密度图和抖动图并将其结合起来/strong>

创建这样的图表有两个主要步骤：

步骤1：资料撷取与处理

为了轻松获取托管在GitHub上的数据JSON文件，我使用了Fetch（）API：

const getData = async () => {    try {      const response = await fetch(        "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/olympic2012.jsonallback=      );      if (response.status !== 200) throw response;      return response.json();    } catch (error) {      throw error;    }  };

为了处理密度数据，我使用与上一篇文章相同的密度函数（density chart）：

let step = 1,      precision = 0.00000000001,      width = 15;    let dataWeight = processDensity(      step,      precision,      width,      maleWeight,      femaleWeight    );

在下一步之前的最后一项任务是确保反转抖动数据结构以使其在水平方向而不是垂直方向上可视化：

maleWeightJitter = maleWeightJitter.map（（e）=> [e [1]，e [0]]）;femaleWeightJitter = femaleWeightJitter.map（（e）=> [e [1]，e [0]]）;

现在，该创建图表了。

步骤2：建立图表

数据处理完成后，创建图表非常简单明了。
我areaspline用来显示密度图和scatter抖动图的类型

series: [        {          name: "Density F",          type: "areaspline",          data: dataWeight.results[1],          color: femaleColorJitter,          yAxis: 0        }        ...        {          name: "Jitter M",          type: "scatter",          data: maleWeightJitter,          jitter: {            y: jitterWidth          },          marker: {            radius: jitterMarkerRadius          },          color: maleColorJitter,          yAxis: 1        }      ]

代码完成了。

现在，您知道如何创建有效的交互式图表以可视化密度分布和关系。

随时尝试使用您的数据，并在下面的评论部分中分享您的经验和问题。

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

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

标签：