开源图表库Highcharts教程:数据总计达到100%时要使用什么图表

翻译|使用教程|编辑:吴园园|2019-11-19 14:06:39.987|阅读 28 次

概述:Highcharts是一款纯JavaScript编写的图表库,本文将为你介绍数据总计达到100%时要使用什么图表。

相关链接:

1574142696.jpg

Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts现已更新至最新版本7.2.1,添加了新的辅助功能选项,具有更大的灵活性,可自定义隐藏的屏幕阅读器区域,并修复了一些之前存在的BUG,赶快下载试用吧~

点击下载Highcharts最新试用版

数据总计达到100%时要使用什么图表

图表最常见的用途之一是说明零件与整个零件之间的关系。“数据构成”。饼图可能是为此目的最受欢迎的图表类型,但其他图表类型可能同样好(专家会争论得更好)。

在本文中,我们将研究使用饼图,甜甜圈,朝阳图,堆积的条形/柱形,堆积的面积和树图图表有效地沟通零件与整个关系的方法。

使用哪个图表主要由数据的性质决定。根据经验,对于简单数据集(六个或更少的元素),饼图或甜甜圈图效果很好。对于更密集的数据集,最好使用其他图表来说明组成,例如堆叠的条形图,柱形图或面积图。对于嵌套的(分层)数据集,旭日形和树形图可能是适合的工作。

让我们探索这些图表类型,看看我们可能希望在其他图表类型中选择图表类型。

简单数据集

饼形图

由于其简单的设计,饼图是使构图可视化的最流行方法。成分或元素表示为整体的小数部分。下图显示了我们呼吸的空气中的气体成分。

1.png

蓝色的氮气是空气中最主要的成分,占78%,绿色的氧气占空气成分的20.9%。
与所有成分图一样,饼图可以轻松设计以满足残疾人的需求(请参见下面的演示):

2.png

备注
饼图包含六个以上的元素,因此很难区分相似的“切片”。但是,即使切片数量很少,也可以通过订购切片的方式来提高可读性。看一下这两个示例(演示1和演示2),它们都包含有关人们何时购买甜甜圈的完全相同的数据。一个按一天中的时间排序,另一个按切片的大小排序。在甜甜圈销售的每日最热门时段排名中,哪一项更好的工作?

3.png

如果您有六个以上的切片,请查看是否可以将它们分为多个图表,或者使用其他图表类型,例如旭日形,柱形或树形图。

甜甜圈图

说到甜甜圈,甜甜圈图与饼图相同,但是通过仅沿饼图的外边缘显示一个区域,可以更轻松地将元素相互比较。

下面的演示使用甜甜圈图显示了空气成分:

4.png

嵌套数据集

朝阳

朝阳图看起来像一个嵌套在一个或多个甜甜圈图上的饼图。这是显示包含父子关系的数据集组成的一种全面而紧凑的方法。

下图显示了100克各种食物中的蛋白质含量:

5.png

上面的图表按四个主要类别(内部饼图)构建,它们具有不同的颜色:肉,鱼,谷物和种子等。外部的“甜甜圈图”将每个主要类别细分为更小的元素,从最高到最低蛋白质含量排序。

该图表可能会非常繁忙,因此应谨慎使用。在类似树形图之类的类似图表上选择此图表的主要原因是,您希望所有子元素都立即可见。

但是要注意的一件事是,森伯斯特图也允许进行向下钻取。如果您的听众能够与图表进行交互,则可以通过单击父项来公开子级数据(请参见下面的演示):

6.png

树状图

与Sunburst一样,树形图将嵌套数据集的组成可视化。对于某些数据集,可以使用任何一种图表类型,只要子级切片的数量不太密集以至于无法读取。对于数据密集的图表,树形图是理想的选择。

下面的树图演示显示了与先前的森伯斯特图表相同的数据;它还具有向下钻取选项,使读者可以进一步探索数据。

8.png

备注
森伯斯特图和树图图都显示嵌套的数据集。但是,每种图表类型都有其自身的优点和局限性。森伯斯特图使读者可以快速查看所有详细信息,这是理想的静态图表类型,但这是以空间为代价的,因为森伯斯特需要大面积才能显示大量数据。另一方面,树形图非常适合紧凑且有限的空间,由于其向下钻取功能,读者可以选择浏览数据以获取更多见解。尽管Treemap易于阅读,即使处于初始的“静态”状态,它的强大功能实际上也是无与伦比的紧凑型交互式图表。

时间序列

堆积柱形图

堆积柱形图非常适合显示时间序列数据的组成,这些时间序列数据也分为几类。时间方面是饼图和朝阳图无法显示的。
下图显示了1960年至2016年美国外国出生人口的百分比组成。堆积的表格是完美的图表,这些数据可以直观地显示出来,因为数据的组成和时间的推移都显示在同一图表上。

9.png

根据图表,从60年代到90年代,欧洲和加拿大人是美国的主要移民群体。从2000年代开始,有75%的移民来自亚洲,拉丁美洲和墨西哥,欧洲和加拿大的移民约占14%。

堆积条形图

堆积的条形图与堆积的柱形图相似,除了数据是水平显示而不是垂直显示。
下面的条形堆积图显示的数据与上面使用的列堆积图相同:

10.png

备注
如果您的数据在X轴上有很长的列表,则堆叠的条形图是正确的选择,因为堆叠的条形图是垂直进行的。这对于移动设备可能是有利的,因为您可以上下滚动以查看完整的时间轴。

堆积面积

堆积面积图类似于柱状图和条形堆积图。它们都用于显示数据合成随时间的进度。堆叠面积图提供了有吸引力的趋势显示,这要归功于使用面积而不是列或条的平滑流动表示(请查看下面的演示):

开源图表库Highcharts教程:数据总计达到100%时要使用什么图表

由于面积结构的原因,堆积面积图是一种非常有效的可访问图表(请参见下面的演示):

开源图表库Highcharts教程:数据总计达到100%时要使用什么图表

=====================================================

想要购买Highcharts正版授权的朋友可以咨询慧都官方客服

更多精彩内容,敬请关注下方的微信公众号,及时获取产品最新资讯▼▼▼

开源图表库Highcharts教程:数据总计达到100%时要使用什么图表



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Highcharts https://www.highcharts.com/blog/post/what-chart-to-use-when-your-data-adds-up-to-100/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat