Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程式提供直觀、互動式圖表。當前支援折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極座標圖等幾十種圖表型別。
【慧都網】可免費高速下載Highcharts最新試用版

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

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

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

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

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

步驟1：資料擷取與處理

為了輕鬆獲取託管在GitHub上的資料JSON檔案，我使用了Fetch（）API：

const getData = async () => {
    try {
      const response = await fetch(
        "https://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
        }
      ]

程式碼完成了。

現在，您知道如何建立有效的互動式圖表以視覺化密度分佈和關係。

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

APS幫助提升企業生產效率，真正實現生產計劃視覺化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率

想要購買Highcharts正版授權，或瞭解更多產品資訊請【諮詢慧都網線上客服】