开源图表库Highcharts教程：数据总计达到100％时要使用什么图表-控件新闻-慧都网

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

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

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

相关链接：

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

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

点击下载Highcharts最新试用版

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

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

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

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

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

简单数据集

饼形图

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

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

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

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

甜甜圈图

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

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

嵌套数据集

朝阳

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

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

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

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

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

树状图

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

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

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

时间序列

堆积柱形图

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