使用常见的可视化（包括饼图、单值指标、表格和时序）在 Kibana 中计算百分比。

进行数据分析时，要想在数字间进行有效对比，使用百分数是一项不可或缺的重要方法，当所涉及数据在样本量或总值方面表现出巨大差异时，尤为如此。通过百分比，我们可以快速准确地了解在某个维度类型上（例如时间范围、地理区域、产品线等）数据总和发生了多大变化。

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blta00392f303d3138e/5df948c66ab6275c8e16ba17/data-percentage-kibana-line-regions-blog.jpg" data-sys-asset-uid="blta00392f303d3138e" alt="按地区绘制的线状图" style="display: block; margin: auto;">

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt82e624d0e3cbaa6f/5df948fc0654a2046f5ff0bc/data-percentage-kibana-line-regions-_-blog.jpg" data-sys-asset-uid="blt82e624d0e3cbaa6f" alt="按地区百分比绘制的线状图" style="display: block; margin: auto;">

在本篇博文中，我们将会通过几个例子详细讲解如何在 Kibana 中使用 TSVB（时序数据可视化工具）借助常用的可视化（包括饼图、单值指标、表格或时序）计算百分比。

在本篇博文中，我们将会使用 Kibana 中提供的 flights 和 ecommerce 样本数据集。通过使用这些数据，您能学会如何回答下面三个问题：

<ul>
	<li>准时航班的百分比是多少？</li>
	<li>每种延迟类型在一段时间内的比率是多少？</li>
	<li>总销售额周同比变化多少？</li>
</ul>
但是，在开始之前，您需要<a href="/guide/en/kibana/7.5/add-sample-data.html">安装 flights 和 ecommerce 样本数据</a>。您既可以在自己的集群（6.5 或更新版本）中安装这些样本数据，也可以 14 天免费试用我们的 <a href="/cn/elasticsearch/service">Elasticsearch Service</a>。

<h2>准时航班的百分比是多少？</h2>
您的客户是一家航空公司，他们想在仪表板上突出显示一个数字，以展示他们在准点率这个目标方面的表现如何。kibana_sample_data_flights 样本索引中的每个文档都代表一个航班，所以如要计算百分比，您需要用代表“准点航班”的文档数量除以总航班数。

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltc29db4212ce9ebe3/5df94951999d6004627d8bf3/data-percentage-kibana-flight-filter-ratio-blog.png" data-sys-asset-uid="bltc29db4212ce9ebe3" alt="准点航班数除以总航班数" style="display: block; margin: auto;">

由于要使用这一算法公式，您应该使用 <a href="/guide/en/kibana/7.5/TSVB.html">TSVB 中的 Metric 可视化</a>，因为其中包含 Filter ratio 计算方法。Filter ratio 会针对两个文档集中的同一指标进行除法运算，并返回一个数值。使用 TSVB 的唯一要求是索引中有一个时间字段，而 kibana_sample_data_flights 索引中正好有这一字段。

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt1644c88d08a10d00/5dfa41f36bf26d27fce208c9/data-percentage-kibana-flight-ontime-percent-blog.png" data-sys-asset-uid="blt1644c88d08a10d00" alt="准时百分比" style="display: block; margin: auto;">

在 7.4 或更新版本中，要想使用 TSVB 完成这一配置，您首先需要选择可视化类型和数据集，然后配置用于显示上面百分比的聚合。

要选择可视化类型和数据集，请：

<ol>
	<li>前往 TSVB，选择 Metric 选项卡：<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt7c4ec46e9d38cbb2/5df94a2b999d6004627d8c0d/data-percentage-kibana-metric-tab-blog.png" data-sys-asset-uid="blt7c4ec46e9d38cbb2" alt="选择 Metric 选项卡" style="display: block; margin: auto;"></li>
	<li>选择 Panel options 选项卡：</li>
	<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt46336f0a372938e1/5dfa424ec80d975c7c97eff4/data-percentage-kibana-panel-options-blog.png" data-sys-asset-uid="blt46336f0a372938e1" alt="Panel options 选项卡" style="display: block; margin: auto;">
</ol>
<ol start="3">
	<li>将 Data timerange mode 设置为 Entire time range，不要设置为仅使用上一个时间间隔。注意：只有 7.4 及之后版本中才有此设置选项。对于之前的版本，您需将日期间隔设置为最大值。</li>
	<li>输入 kibana_sample_data_flights 作为索引。将 time field 设置为 timestamp。<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt59e8197f3791be8e/5df94a9d6ab6275c8e16ba23/data-percentage-kibana-time-field-timestamp-blog.png" data-sys-asset-uid="blt59e8197f3791be8e" alt="将 time field 设置为 timestamp" style="display: block; margin: auto;"></li>
</ol>
您现在已经选择索引和时间范围，可以配置所显示的数据了。

<ol>
	<li>返回至 Data 选项卡并使用 Filter Ratio 来计算特定值（例如 FlightDelayType: "No Delay"）的百分比。<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte9031a9f52cec212/5df94b0b72004b03ce1d0fb2/data-percentage-kibana-filter-ratio-blog.png" data-sys-asset-uid="blte9031a9f52cec212" alt="使用 Filter Ratio" style="display: block; margin: auto;">
	<ul>
		<li>Filter Ratio 会使用 <a href="/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html">query string syntax</a> 来选中两个文档集。</li>
	</ul></li>
</ol>
<ol start="2">
	<li>前往 Options 选项卡并选择百分比格式设置工具。
	<ul>
		<li>如果默认的小数点后 4 位精度对您来说太过精确，您可以使用自定义格式字符串来减少位数。<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt33c0bafe8373c34b/5dfa42cabda0aa5d1ad54183/data-percentage-kibana-metric-options-custom-blog.png" data-sys-asset-uid="blt33c0bafe8373c34b" alt="使用自定义格式字符串" style="display: block; margin: auto;"></li>
	</ul></li>
</ol>
如果要比较多个值，而不仅限于一个值，您还可以使用 Kibana 中的另外两个可视化。如果使用 bucket aggregation 来选择要比较的数值，您可以使用饼状图或表格将每个值转换为百分比。

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt21b1823be6d126be/5df95bcac1df3b5a1f0703eb/data-percentage-kibana-pie-chart-blog.png" data-sys-asset-uid="blt21b1823be6d126be" alt="使用饼状图将每个值转换为百分比" style="display: block; margin: auto;">

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte0ac679f10aec4ed/5df95bff46bc275c71356b3d/data-percentage-kibana-table-vis-blog.png" data-sys-asset-uid="blte0ac679f10aec4ed" alt="使用表格可视化将每个值转换为百分比" style="display: block; margin: auto;">

这些可视化针对 FlightDelayType 字段应用 Terms 桶聚合，将每个桶中的数量转换为占总值的百分比并显示出来。在 flights 样本数据中，字段 FlightDelayType 仅有 6 个唯一值，所以将 Terms 的数量设置为 6 或更大时，显示的百分比是准确的。如果数据中有更多的唯一值，您需要启用“Other”桶，以便涵盖所有数据：

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltb657e81b6c5a4fee/5dfa430a973ece5c8871279b/data-percentage-kibana-buckets-blog.png" data-sys-asset-uid="bltb657e81b6c5a4fee" alt="启用 Other 桶" style="display: block; margin: auto;">

<h2>每种延迟类型在一段时间内的比率是多少？</h2>
这家公司希望在仪表板中并排展示两个可视化：基于时序对比上面的汇总结果。这能够让他们向下钻取至具体时间范围，并同时查看汇总数据和细分数据。

由于航班文档中有时间字段，TSVB 是创建可视化的最得力工具。仍然使用上面的设置，您可以使用 Filter Ratio 来针对每个时间间隔计算“No Delay”（无延迟）航班除以总航班数量的值：

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltae7597dd8910afcb/5df95c6646bc275c71356b43/data-percentage-kibana-ontime-vis-blog.png" data-sys-asset-uid="bltae7597dd8910afcb" alt="关于准时航班的可视化" style="display: block; margin: auto;">

要对比多于一项时序数据，您既可创建多个 Filter ratio，也可以使用聚合来选择群组。TSVB 有一个模式可用来展示多个时序，总比例为 100%。

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte39470e4cbb1c9a6/5dfa602146bc275c713570a6/data-percentage-kibana-stacked-vis-blog.jpg" data-sys-asset-uid="blte39470e4cbb1c9a6" alt="多时序可视化" style="display: block; margin: auto;">

如要在 TSVB 中配置堆叠式百分比可视化，您首先需要选择正确的数据，然后配置您的聚合。如要选择正确的数据：

<ol>
	<li>前往 TSVB，选择 Panel options，然后输入 kibana_sample_data_flights 作为索引。</li>
	<li>将 Time field 设置为 timestamp。<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt404bb952fff4ecbc/5df95d33bda0aa5d1ad53d34/data-percentage-kibana-stacked-timestamp-blog.png" data-sys-asset-uid="blt404bb952fff4ecbc" alt="将 time field 设置为 timestamp" style="display: block; margin: auto;"></li>
</ol>
如要配置您的聚合：

<ol>
	<li>返回至 Data 选项卡。</li>
	<li>在 Group by 下面，为 FlightDelayType 选择 Terms。</li>
	<li>前往 Options 选项卡。<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt48a4f14abb2fab0f/5df95d85c1df3b5a1f0703f9/data-percentage-kibana-options-tab-blog.png" data-sys-asset-uid="blt48a4f14abb2fab0f" alt="Options 选项卡中需选择的项目" style="display: block; margin: auto;"></li>
	<li>选择 Data Formatter &gt; Percent。</li>
	<li>选择 Stacked &gt; Percent。</li>
	<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt4d1ce679f40a5ca0/5dfa43720f82e627e30221ba/data-percentage-kibana-stacked-percent-blog.png" data-sys-asset-uid="blt4d1ce679f40a5ca0" alt="选择 stacked-percent" style="display: block; margin: auto;">
	<li>选择 Split color theme &gt; Rainbow。</li>
</ol>
<h2>销售额周同比变化多少？</h2>
您有一家电商客户，他们将每笔交易存储在 kibana_sample_data_ecommerce 索引中。他们希望通过可视化展示销售额的周同比变化百分比，这一指标对他们的业务至关重要。因为该问题中有一个时间元素，所以您将使用 TSVB 来创建这个可视化。您还可以使用 Timelion 创建周同比图表，但这里不会讲解。

如您上面所看到的，TSVB 使用同一聚合既可创建指标可视化，也可创建时序可视化。和之前的例子（您将 Data timerange mode 设置为了 Entire time range）不同，在这个可视化中，您只需展示最近一天的数据与上周同一天数据的比较结果。如您所见，这两个可视化显示最近一天的销售额下降了 5.2%：

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8f460928517cc07f/5dfa5e20999d6004627d91e0/data-percentage-kibana-percent-decrease-blog.png" data-sys-asset-uid="blt8f460928517cc07f" alt="销售额下降" style="display: block; margin: auto;">

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltd721942353259ea9/5df9613f6bf26d27fce20454/data-percentage-kibana-decrease-vis-blog.png" data-sys-asset-uid="bltd721942353259ea9" alt="显示下降的可视化" style="display: block; margin: auto;">

如要创建此可视化，您需要计算每天的总销售额，然后与 7 天前的总额进行对比。最轻松的比较方法是 Serial Difference 聚合，这一聚合会选取每个值，然后从中减去特定时间间隔之前的值。

和前面的例子一样，设置 TSVB，确保选择 kibana_sample_data_ecommerce 索引，并将 Time field 设置为 order_date。同时，还要将间隔准确设置为 1d。TSVB 中的默认间隔会基于整体时间范围而变化，而此次的计算需要将间隔时间设为固定值。

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt619c761e63728c49/5df961af999d6004627d8cab/data-percentage-kibana-data-sample-blog.png" data-sys-asset-uid="blt619c761e63728c49" alt="选择数据样本" style="display: block; margin: auto;">

返回至 Data 选项卡，然后针对字段 taxful_total_price 选择 Sum 聚合。



<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt902413233c386db0/5df961eac2cb735be5801c6d/data-percentage-kibana-total-sales-blog.png" data-sys-asset-uid="blt902413233c386db0" alt="Sum 聚合" style="display: block; margin: auto;">

然后，针对 Sum of taxful_total_price 添加一个 Serial Difference 聚合，记得要设为相差 7 个桶，因为您已将时间间隔设置为 1 天。Serial Difference 会从每天的值中减去 7 个桶之前的那天的值，从而得出销售额周同比的总差额。由于 Serial Difference 指标的计算方式，它始终会将左边的 7 天留空，所以您应该选择一个较大的时间范围：

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltbd80a9d660d5010c/5df96230e372d203cfbfe0a4/data-percentage-kibana-serial-difference-blog.png" data-sys-asset-uid="bltbd80a9d660d5010c" alt="Serial Difference 聚合" style="display: block; margin: auto;">

最后，您需要通过数学计算将周同比差额转换为百分比。将当前限售额和差额加在一起，然后除以当前销售额：

<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt5a4948af410ce13a/5df962c846bc275c71356b83/data-percentage-kibana-math-blog.png" data-sys-asset-uid="blt5a4948af410ce13a" alt="使用公式计算百分比" style="display: block; margin: auto;">

所用的 <a href="/guide/en/elasticsearch/painless/7.5/painless-guide.html"> Painless 脚本</a>为 <code>((params.total + params.diff) / params.total) - 1</code>

结果如上面的可视化所示。为清晰起见，您还可以使用静态值 0 创建一个新的时序，以突出差额为 0 时的基准。

您现在可以在 Time Series 和 Metric 选项卡之间切换以决定哪种展示方式更适合您的用例。

<h2>结论
</h2>
这些只是在 Kibana 中有效计算和使用百分比的几个例子。除了我们在此篇博文中所列举的内容，如果您在处理百分比时希望探索更多计算选项，可以尝试使用 Kibana 中的 <a href="/cn/what-is/kibana-canvas">Canvas</a> 来同时控制数据的查询和显示方式。

其他资源

<ul>
	<li><a href="/cn/webinars/kibana-time-series-visual-builder-demystified">有关时序数据可视化的 Kibana 最佳实践 | Elastic视频</a></li>
	<li><a href="/guide/en/elasticsearch/painless/7.5/painless-guide.html">Painless 脚本语言的脚本编写指南</a></li>
	<li><a href="/guide/en/kibana/7.5/canvas-function-reference.html">Canvas 函数引用</a></li>
</ul>

data-percentage-kibana-blog-banner.jpg

data-percentage-kibana-blog-thumb.jpg

How to display data as a percentage in Kibana visualizations

如何在 Kibana 可视化中以百分比形式显示数据

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Wylie Conlon

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Communication Preferences - ONLY for /communication-preferences

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/elastic-cloud-account-terms" target="_self">服务条款</a>，并且您同意通过您提供的上述联系方式接收<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">所选的通信</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Serverless GDPR Text

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/serverless-preview-terms" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.

Cloud Trial GDPR Text

提交即表示您同意 <a href="/cn/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud 服务条款</a>。我们将会按照 <a href="/cn/legal/privacy-statement">Elastic 的隐私声明</a>处理您的个人数据。

By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Newsletter GDPR Text

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/terms-of-use" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

Explore similar demos

Overview

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

本页内容尚不支持所选语言。Elastic 正在不断努力，以实现对多种语言内容的支持。感谢您在此期间给予的耐心与陪伴！

Author

Articles by

Learn more

Watch now (no PT)

Watch now

See all top stories

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Load More

Share on LinkedIn

Follow us on LinkedIn

Search Integrations

All Solutions

Video for

Follow us on Twitter

See when this webinar starts in my time zone

查看本次网络研讨会在我的时区的开始时间

Register to Watch

Register now

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

无法实时参加？注册后我们会给您发送录像。您还将收到相关内容的电子邮件。

Author

Articles by Wylie Conlon

Elastic

如何在 Kibana 可视化中以百分比形式显示数据

Sign up for Elastic Cloud free trial