数据可视化的艺术

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

跨越不同地域的数千个网站的原始数据保存在庞大的数据库中，这些原始数据即是网站正在测量的网络组件、页面性能、可用性，以及页面内容指标（Page content metrics）。当我们将这些数据呈现给他人而没有对其进行正确组织和分类时，这将导致难以阅读、分析和确定结论。

通过图形方式来组织和分类这些数据集，并将其呈现，则可以更轻松地达成您的目的。接下来，我们将看到各种各样的图表类型，这些图表常常会在性能分析中使用到，并且在基于数据类型的各种场景中也适用。

常用的图表类型有如下几种：

1. 条形图（Bar chart）。
2. 折线图（Line chart）。
3. 散点图（Scatterplot chart）。
4. 直方图（Histogram）。
5. 累积分布图（Cumulative distribution chart）。
6. 地理图（Geo chart）。
7. 气泡图（Bubble chart）。

为了准确地确定代表一组数据的图表类型，我们来看看实际情景下的一些性能分析案例。

使用案例之其一

通常在分析性能数据时，我们会遇到需要根据某些定性数据（Qualitative data）对数据进行排名的情况。例如，考虑美国不同城市网站性能的定性数据，让我们试试确定哪种图表有助于以最佳方式解释数据。

条形图以垂直线条形式展示数据。这适用于需要比较可分类的不同定性数据的情况。因此，当我们想要在性能分析中展示排名数据时，使用条形图是恰当的。

Catchpoint 的数字体验智能平台提供了以不同级别的分解来生成条形图的选项，这是按排名顺序展示定性数据的一个有效方法。

横轴：城市名称；纵轴：页面响应时间（单位 ms）。

上面的条形图展示了美国不同城市的网页加载时间排名。通过看这张图，我们很容易找出哪个城市比其他城市表现更好。

使用案例之其二

考虑另一种情况：我们需要研究一段时间内的性能数据，以查看性能是否有任何变化。

折线图可以用来表示特定时期内，网站的定性性能数据的持续分布。这可以确定性能受到影响的时间范围。Catchpoint 可以灵活地提供折线图（可一次绘制 10 种不同指标的折线图），以提供详细信息以找出问题的根源。

从上面的折线图中，我们看到 10 月份的性能表现发生了变化，原因是页面上的内容总数有所增加。

因此，折线图可帮助您了解性能变化，并且分析出一段时间内性能变化背后的根本原因。

使用案例之其三

错误过滤（Error filtering）是数据分析的重要组成部分。它能帮助识别不同的错误以及发生错误的时间，从而评估网站的可用性。这也有助于评估网站的可用性，因此，此图表类型经常用于性能分析中，以监控网站的可用性。

一些解决方案提供了一种轻松的方式来过滤特定时间范围内不同的错误类型。散点图是能直观地展示所有这些错误的方法，它绘制出了每次失败的测试运行。

横轴：时间；纵轴：页面响应时间（单位 ms）。

上图展示了指定时间间隔内，网络测试所出现的所有错误，人们可以通过单击数据点并查看瀑布式数据（Waterfall data）来进一步分析每个数据点。

散点图也可以用来展示不同的数据模式，以便深入分析根本原因。例如，考虑到页面性能受文件高响应时间影响的情况。分析数据点揭示了来自不同服务器的文件中，有一些服务器未经压缩便发送文件，这些未压缩的文件增加了页面加载的延迟。

下面的散点图展示了文件 1 和文件 2 的不同数据段，每个数据段都具有从不同服务器提供的未压缩和压缩版本。压缩文件的响应时间比较大的未压缩文件要好得多，因为从服务器向客户端发送更多字节的数据需要更长的时间。

横轴：时间；纵轴：文件大小。

使用案例之其四

在性能分析中，了解存在于性能指标阈值范围内的数据点的数量是非常重要的。这对于评估有多少用户受到低性能的影响，以及有多少有经验的、可靠的性能来说，很有用。

将数据分类到范围桶（Range buckets）中可帮助您了解有多少数据点位于该网站所需的阈值范围内。它有助于进一步分析性能较低的数据集。

直方图可以用来表示范围桶中的数据分布。每个桶描述了性能指标范围，以及数据集中落入该范围的数据的数量。

横轴：加载时间范围；纵轴：数据数量。

上面的直方图展示了 Y 轴上的数据运行次数以及 X 轴上的网页加载时间范围。第二栏显示有 232 次运行，其网页响应时间在 5.3-6 秒范围内。

直方图为查看受影响的用户数提供了一个范围桶，而累积分布图则给出了超过该性能指标阈值的用户数量的百分比。

累积分布图是一种常用的图表类型，它用百分表示性能指标。它绘制出了性能指标大于或小于网站阈值的用户的百分比。

下图显示了网页响应时间的累积分布图。

横轴：用户数量百分比；纵轴：页面响应时间（单位 ms）

从上面的累积分布图中，我们看到在第 90 百分位，网站的网页响应时间为 10.3 秒。这意味着，在收集到的数据的时间范围内，网页加载时间超过了 10.3 秒的用户占比为 10%。

使用案例之其五

当网站托管在多个地点时，我们有必要从不同的地理位置评估其性能。Catchpoint 提供了展示性能的地理统计图，其中绿色到红色的变化对应着性能从好到坏的变化。

上面的地理图展示了单个网站的性能在不同地域间的差异。从图中，我们看到美国和欧洲的用户体验到了最佳的网页加载时间，而中国用户则体验到更长的网页加载时间。

使用案例之其六

迄今为止，我们所讨论的图表类型都关注于可被选择用于评估性能的单个度量标准。如果我们想评估一个以上的度量标准，或一组不同网站的性能，这时候该怎么办呢？

在这种情况下，对于在单个视图中评估不同网站的多个性能指标，气泡图是一个很好的选择。

横轴：文档完成时间（单位 ms）；纵轴：网页响应时间（单位 ms）。

上述气泡图在单个视图下给出了 3 个不同网站的性能数据（文档完整，网页响应）。

总结

从上述场景中我们可以看出，可视化是以更有意义的方式表达数据的强力方法。它有助于找出问题的根本原因并得出结论，从而缩小需要优化的区域。

Catchpoint 中提供的不同图表类型可帮助您以不同的方式分割和切分数据，以对数据进行分析。除了分析数据以外，监测不同网页或竞争对手网站的性能趋势也很重要，以了解系统随时间的变化情况。

问答

可视化数据库模式的工具有哪些？

相关阅读

一些最好用的数据可视化工具

用Python进行数据可视化的10种方法

从1维到6维，一文读懂多维数据可视化策略

 

此文已由作者授权腾讯云+社区发布，原文链接：https://cloud.tencent.com/developer/article/1131771?fromSource=waitui