【Highcharts教程】如何将一个图表拆分成图表网格(上)

HighChart

下载Highcharts最新版本

有时,当图表具有高密度的数据点(例如具有多个系列的折线图)时,可视化可能最终变得混乱并且可能模糊不清。 通过一些仔细的规划,可以使用多种方法避免数据密度问题。我将在这里讨论的一种方法是小数据或网格图。此解决方案将数据系列分成单独的图表,这些图表以网格排列,具有相同的轴和图表类型

小倍数非常有用且易于设置。然而,这种方法不是一种非常流行的方法,可能是因为开发人员和设计人员可能认为很难设置,或者他们只是不知道这种强大的方法。 在本教程中,我将向您展示如何设置一个小的倍数,以及讨论这种数据可视化方法的优缺点。 首先,让我们检查一下这个问题的图表。下面的演示显示了2009年1月至2018年7月期间10种不同货币的欧元×××参考汇率。

HighChart

尽管我已经添加了缩放功能和共享工具提示以在单个视图中显示数据,但处理图表信息仍然是一项挑战。通过在一个图表上表示所有数据集,出现了许多问题,例如:

  • 主要图表的信息完全被一个或多个图表的不成比例的价值所劫持,在这种情况下,印度尼西亚卢比,因为它的价值比其他数据系列更重要; 难以比较不同的折线图。

  • 读者必须放大/缩小并取消选择一些数据系列才能检查其余数据。(单击印尼盾以取消选择该系列,您将看到它如何工作,但不是与图表交互的理想方式)

正如您所看到的,在一个图表上显示多个数据系列或系列可能会使读者感到困惑,特别是如果某些值在整个系列中非常接近,或者彼此之间存在很大差异。 小数据通过从一个图表上的数据集中隔离和显示每个系列来解决我上面提到的问题。读者可以通过这种方式了解每个系列趋势的“形状”,从而更好地了解每个系列的动态。读者也可能会发现比较网格形状的系列更容易。一旦理解了第一张图表,读者就不必花费任何精力来破译其他图表的图例和轴,而是继续关注处理数据以做出决定或找到模式。 在下面的演示中,我使用小型多重方法可视化欧元×××参考汇率的相同数据。

HighChart

从上面的图表中,我可以很容易地看到瑞士法郎在过去几年中比欧元更强; 2009年的一欧元价值1.5瑞士法郎,2018年7月的价值仅为1.2瑞士法郎。鉴于英镑在2009年和2018年价值几乎相同,2015年初大幅下跌。

扫描二维码关注公众号,回复: 4539118 查看本文章

备注

一般来说,小倍数对于所有数据系列具有相同的比例,但在这种情况下,为了清楚起见,由于数据值的显着差异,我在y轴上使用了不同的比例。在这种情况下,强烈建议向读者说清楚尺度是不同的,以避免在比较系列时得出错误的结论。 要创建这个小的倍数,我必须使用Highcharts云在一个图表上隔离每个数据系列,然后在一个div中收集他们的iframe,就是这样,很简单:

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

要映射还是不映射

小多重方法的另一个实际用途是使用地图。地图的形状和大小的不规则性可能会误导读者做出错误的假设。通常较大的区域可以掩盖较小的区域。例如,加拿大爱德华王子岛省比努纳武特地区小300倍,因此任何标准的加拿大地图代表都将完全隐藏小省,而牺牲最大的省份。在这种情况下,小的倍数可以很容易地解决问题,而不会像地图图表那样使用地图的形状进行调整。

下面的演示可以看到加拿大各省和地区的确切形状和几乎相同的尺寸。它显示了2015年联邦选举期间每个省或地区的胜利政党。这个演示只关注一点:哪个是胜利方。

HighChart

你可以很容易地看到自由党在所有省份和地区都获胜,除了在萨斯喀彻温省和阿尔伯塔省,保守党占多数席位。 同样,这个演示也很容易设置。我在一个单独的图表上创建每个省和地区; 然后我使用无序列表标签收集它们

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

为了能够将省或地区与加拿大主地图分开,我allAreas在该series功能下的每个图表中将选项设置为false :

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

现在,在这种情况下,地图是故意稀疏的数据。但是,我可以使用此数据集的其他图表类型来说明同一故事的不同版本。在下面的演示中,我使用饼图让读者一眼就能看到每个省和地区内的投票分布。根据您的数据可视化目标,这可能是您实际要强调的内容。

HighChart

网格图的缺点

到目前为止,我只分享了小倍数(网格图)的优点,但与其他任何方法一样,也存在缺点。 其中一个主要缺点是在大屏幕上可视化许多小图表很好。然而,在智能手机和某些平板电脑上,它根本不实用,因为读者必须向前和向后滚动以检查/比较每个图表。另一个缺点是小图表的数量,数字越大,读者处理图表所需的时间越多,读者通常最终使用他们的记忆来记住图表,而不是实际处理图表的信息。 另一个问题是,当数据系列包含相距很远的值时,您必须在具有固定的y轴刻度(可能使某些系列像平线,如我们的初始汇率图表中)之间进行选择,或者您必须调整y轴刻度以最大化垂直不动产,这意味着您可能会误报每个系列的大小(以牺牲趋势的“形状”为代价),如我们的小多元货币图表所示。

在地图的情况下,小的倍数在某些情况下可能是有利的,但它消除了诸如大小,位置,边界等的地理背景。对于不熟悉该国家或地区的读者,这可能是混乱的。 所以你去; 工具箱的另一个数据可视化工具。在数据可视化方面,请记住使用常识。如果它可以帮助你的读者,不要避免一些额外的工作,而且,不要因为你可以创造疯狂的小型多重可视化! 我很确定他们还有许多其他情况,其中小倍数可能非常有用,请随时在下面的评论部分分享您的经验和提示。


猜你喜欢

转载自blog.51cto.com/13993266/2331308