开源图表库Highcharts教程：使用密度和抖动图可视化数据分布-控件新闻-慧都网

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

原创|使用教程|编辑：杨鹏连|2020-12-28 11:44:56.510|阅读 277 次

概述：在本文中，我将重点介绍如何结合密度图和抖动图来说明数据分布。我将重点介绍合并这两种图表类型的好处，以及如何使用高图表创建此合并。

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

点击下载Highcharts最新试用版

ç¹è²å¾ç

在过去的文章中，我向您展示了如何创建具有抖动的密度图和箱形图以可视化数据分布。你猜怎么了？还有其他吸引人的方法可以显示数据分布。在本文中，我将重点介绍如何结合密度图和抖动图来说明数据分布。我将重点介绍合并这两种图表类型的好处，以及如何使用高图表创建此合并。

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

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

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

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

步骤1：资料撷取与处理

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

const getData = async () => {
    try {
      const response = await fetch(
        "//raw.githubusercontent.com/mekhatria/demo_highcharts/master/olympic2012.json?callback=?"
      );
      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
        }
      ]

代码完成了。

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

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