Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

在過去的文章中，我向您展示了如何創建具有抖動的密度圖和箱形圖以可視化數據分布。你猜怎么了？還有其他吸引人的方法可以顯示數據分布。在本文中，我將重點介紹如何結合密度圖和抖動圖來說明數據分布。我將重點介紹合并這兩種圖表類型的好處，以及如何使用高圖表創建此合并。

數據點對于男女運動員均很重要。女運動員的體重主要集中在55公斤至60公斤之間，而男運動員的主要體重則在65公斤至75公斤之間，略微在120公斤左右。
正確，您開始看到將這兩個圖表組合在一起的好處，因為每個圖表都可以幫助我們從不同的角度理解數據。讓我們深入研究吧？

抖動圖是可視化連續數據和分類數據之間關系的絕佳選擇。數據的呈現方式使我們能夠評估數據點的數量，點的散布和分布。但是，如果有大量數據點重疊，則肉眼無法直觀地評估分布，這就是密度分布圖有效的原因。密度圖以相當清晰的方式顯示密度分布，而與數據點的數量或重疊情況無關。

如何使用Highcharts創建密度圖和抖動圖并將其結合起來？

創建這樣的圖表有兩個主要步驟：

步驟1：資料擷取與處理

為了輕松獲取托管在GitHub上的數據JSON文件，我使用了Fetch（）API：

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

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

現在，您知道如何創建有效的交互式圖表以可視化密度分布和關系。

隨時嘗試使用您的數據，并在下面的評論部分中分享您的經驗和問題。