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

點擊下載Highcharts最新試用版

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

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

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

如何使用Highcharts創(chuàng)建密度圖和抖動圖并將其結(jié)合起來？

創(chuàng)建這樣的圖表有兩個主要步驟：

步驟1：資料擷取與處理

為了輕松獲取托管在GitHub上的數(shù)據(jù)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：建立圖表

數(shù)據(jù)處理完成后，創(chuàng)建圖表非常簡單明了。
我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
        }
      ]

現(xiàn)在，您知道如何創(chuàng)建有效的交互式圖表以可視化密度分布和關(guān)系。

隨時嘗試使用您的數(shù)據(jù)，并在下面的評論部分中分享您的經(jīng)驗和問題。