下載Highcharts最新版本

有時，當圖表具有高密度的數(shù)據(jù)點（例如具有多個系列的折線圖）時，可視化可能最終變得混亂并且可能模糊不清。 通過一些仔細的規(guī)劃，可以使用多種方法避免數(shù)據(jù)密度問題。我將在這里討論的一種方法是小數(shù)據(jù)或網(wǎng)格圖。此解決方案將數(shù)據(jù)系列分成單獨的圖表，這些圖表以網(wǎng)格排列，具有相同的軸和圖表類型。

小倍數(shù)非常有用且易于設(shè)置。然而，這種方法不是一種非常流行的方法，可能是因為開發(fā)人員和設(shè)計人員可能認為很難設(shè)置，或者他們只是不知道這種強大的方法。 在本教程中，我將向您展示如何設(shè)置一個小的倍數(shù)，以及討論這種數(shù)據(jù)可視化方法的優(yōu)缺點。 首先，讓我們檢查一下這個問題的圖表。下面的演示顯示了2009年1月至2018年7月期間10種不同貨幣的歐元外匯參考匯率。

盡管我已經(jīng)添加了縮放功能和共享工具提示以在單個視圖中顯示數(shù)據(jù)，但處理圖表信息仍然是一項挑戰(zhàn)。通過在一個圖表上表示所有數(shù)據(jù)集，出現(xiàn)了許多問題，例如：

• 主要圖表的信息完全被一個或多個圖表的不成比例的價值所劫持，在這種情況下，印度尼西亞盧比，因為它的價值比其他數(shù)據(jù)系列更重要; 難以比較不同的折線圖。
• 讀者必須放大/縮小并取消選擇一些數(shù)據(jù)系列才能檢查其余數(shù)據(jù)。（單擊印尼盾以取消選擇該系列，您將看到它如何工作，但不是與圖表交互的理想方式）

正如您所看到的，在一個圖表上顯示多個數(shù)據(jù)系列或系列可能會使讀者感到困惑，特別是如果某些值在整個系列中非常接近，或者彼此之間存在很大差異。 小數(shù)據(jù)通過從一個圖表上的數(shù)據(jù)集中隔離和顯示每個系列來解決我上面提到的問題。讀者可以通過這種方式了解每個系列趨勢的“形狀”，從而更好地了解每個系列的動態(tài)。讀者也可能會發(fā)現(xiàn)比較網(wǎng)格形狀的系列更容易。一旦理解了第一張圖表，讀者就不必花費任何精力來破譯其他圖表的圖例和軸，而是繼續(xù)關(guān)注處理數(shù)據(jù)以做出決定或找到模式。 在下面的演示中，我使用小型多重方法可視化歐元外匯參考匯率的相同數(shù)據(jù)。

從上面的圖表中，我可以很容易地看到瑞士法郎在過去幾年中比歐元更強; 2009年的一歐元價值1.5瑞士法郎，2018年7月的價值僅為1.2瑞士法郎。鑒于英鎊在2009年和2018年價值幾乎相同，2015年初大幅下跌。

備注

一般來說，小倍數(shù)對于所有數(shù)據(jù)系列具有相同的比例，但在這種情況下，為了清楚起見，由于數(shù)據(jù)值的顯著差異，我在y軸上使用了不同的比例。在這種情況下，強烈建議向讀者說清楚尺度是不同的，以避免在比較系列時得出錯誤的結(jié)論。 要創(chuàng)建這個小的倍數(shù)，我必須使用Highcharts云在一個圖表上隔離每個數(shù)據(jù)系列，然后在一個div中收集他們的iframe，就是這樣，很簡單：

 <div class="reduce">
    <ul>
      <li>
        <div class="gridMap" id="highcharts-gT_Eme5tu">
          <script src="//cloud.highcharts.com/inject/gT_Eme5tu/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-PganD5_th">
          <script src="//cloud.highcharts.com/inject/PganD5_th/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-QzQT1743W">
          <script src="//cloud.highcharts.com/inject/QzQT1743W/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-RbERuxfAt">
          <script src="//cloud.highcharts.com/inject/RbERuxfAt/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-DS8I5A42B">
          <script src="//cloud.highcharts.com/inject/DS8I5A42B/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-zNOknhPhQ">
          <script src="//cloud.highcharts.com/inject/zNOknhPhQ/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-9F2XWYAqK">
          <script src="//cloud.highcharts.com/inject/9F2XWYAqK/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-fiBWvn6jC">
          <script src="//cloud.highcharts.com/inject/fiBWvn6jC/" defer="defer"></script>
        </div>
      </li>
      <li>
        <div class="gridMap" id="highcharts-CMpwG933f">
          <script src="//cloud.highcharts.com/inject/CMpwG933f/" defer="defer"></script>
        </div>
      </li>
    </ul>
  </div>

要映射還是不映射

小多重方法的另一個實際用途是使用地圖。地圖的形狀和大小的不規(guī)則性可能會誤導(dǎo)讀者做出錯誤的假設(shè)。通常較大的區(qū)域可以掩蓋較小的區(qū)域。例如，加拿大愛德華王子島省比努納武特地區(qū)小300倍，因此任何標準的加拿大地圖代表都將完全隱藏小省，而犧牲最大的省份。在這種情況下，小的倍數(shù)可以很容易地解決問題，而不會像地圖圖表那樣使用地圖的形狀進行調(diào)整。

下面的演示可以看到加拿大各省和地區(qū)的確切形狀和幾乎相同的尺寸。它顯示了2015年聯(lián)邦選舉期間每個省或地區(qū)的勝利政黨。這個演示只關(guān)注一點：哪個是勝利方。

你可以很容易地看到自由黨在所有省份和地區(qū)都獲勝，除了在薩斯喀徹溫省和阿爾伯塔省，保守黨占多數(shù)席位。 同樣，這個演示也很容易設(shè)置。我在一個單獨的圖表上創(chuàng)建每個省和地區(qū); 然后我使用無序列表標簽收集它們

 <ul>
    <li><span class="gridMap" id="yt"> </span></li>
    <li><span class="gridMap" id="nt"> </span> </li>
    <li><span class="gridMap" id="nu"> </span> </li>
    <li><span class="gridMap" id="ns"> </span></li>
    <li><span class="gridMap" id="nl"> </span></li>
    <li><span class="gridMap" id="nb"> </span></li>
    <li><span class="gridMap" id="qc"> </span></li>
    <li><span class="gridMap" id="pe"> </span></li>
    <li><span class="gridMap" id="on"> </span></li>
    <li><span class="gridMap" id="mb"> </span></li>
    <li><span class="gridMap" id="sk"> </span></li>
    <li><span class="gridMap" id="ab"> </span></li>
    <li><span class="gridMap" id="bc"> </span></li>
  </ul>

為了能夠?qū)⑹』虻貐^(qū)與加拿大主地圖分開，我allAreas在該series功能下的每個圖表中將選項設(shè)置為false ：

series: [{
    data: [
      ['ca-nb', 10],
    ],
    name: null,
    color: liberal,
    allAreas: false,
    dataLabels: {
      enabled: false
    }
  }]

現(xiàn)在，在這種情況下，地圖是故意稀疏的數(shù)據(jù)。但是，我可以使用此數(shù)據(jù)集的其他圖表類型來說明同一故事的不同版本。在下面的演示中，我使用餅圖讓讀者一眼就能看到每個省和地區(qū)內(nèi)的投票分布。根據(jù)您的數(shù)據(jù)可視化目標，這可能是您實際要強調(diào)的內(nèi)容。

網(wǎng)格圖的缺點

到目前為止，我只分享了小倍數(shù)（網(wǎng)格圖）的優(yōu)點，但與其他任何方法一樣，也存在缺點。 其中一個主要缺點是在大屏幕上可視化許多小圖表很好。然而，在智能手機和某些平板電腦上，它根本不實用，因為讀者必須向前和向后滾動以檢查/比較每個圖表。另一個缺點是小圖表的數(shù)量，數(shù)字越大，讀者處理圖表所需的時間越多，讀者通常最終使用他們的記憶來記住圖表，而不是實際處理圖表的信息。 另一個問題是，當數(shù)據(jù)系列包含相距很遠的值時，您必須在具有固定的y軸刻度（可能使某些系列像平線，如我們的初始匯率圖表中）之間進行選擇，或者您必須調(diào)整y軸刻度以最大化垂直不動產(chǎn)，這意味著您可能會誤報每個系列的大小（以犧牲趨勢的“形狀”為代價），如我們的小多元貨幣圖表所示。

在地圖的情況下，小的倍數(shù)在某些情況下可能是有利的，但它消除了諸如大小，位置，邊界等的地理背景。對于不熟悉該國家或地區(qū)的讀者，這可能是混亂的。 所以你去; 工具箱的另一個數(shù)據(jù)可視化工具。在數(shù)據(jù)可視化方面，請記住使用常識。如果它可以幫助你的讀者，不要避免一些額外的工作，而且，不要因為你可以創(chuàng)造瘋狂的小型多重可視化！ 我很確定他們還有許多其他情況，其中小倍數(shù)可能非常有用，請隨時在下面的評論部分分享您的經(jīng)驗和提示。

購買Highcharts正版授權(quán)，請點擊“”喲！