Geekly articles weekly

Kibana用户指南。 可视化。 第6部分

Kibana中官方数据可视化文档翻译的五分之一。

原始材料的链接： Kibana用户指南[6.6]»可视化

链接到第1部分：《 Kibana用户指南》。 可视化。 第一部分
链接至第2部分：《 Kibana用户指南》。 可视化。 第二部分
链接至第3部分：《 Kibana用户指南》。 可视化。 第三部分
链接至第4部分：《 Kibana用户指南》。 可视化。 第4部分
链接至第5部分：《 Kibana用户指南》。 可视化。 第5部分

内容：

1. Vega图

2.检查可视化

维加伯爵


警告 此功能是试验性的，在以后的版本中可能会更改或删除。 Elastic将尽力解决任何问题，但SLA官方GA功能不支持实验功能。
您可以离线或在地图顶部在Kibana中构建Vega和VegaLite数据的可视化。 要观看Vega的实际操作，请观看此简短的概述视频 。

Vega入门


请按照以下步骤创建您的第一个Vega可视化文件。

  1. 在Kibana中，选择“可视化”并添加Vega可视化。 您应该看到默认图形。
  2. 尝试将mark从line更改为point ， area ， bar ， circle ， square ，...（请参阅文档 ）。
  3. 尝试其余的Vega或VegaLite可视化效果。 您可能需要使URL绝对，例如，将"url": "data/world-110m.json"替换为"url": "https://vega.imtqy.com/editor/data/world-110m.json" （请参阅下面的注释）。
  4. 使用makelogs实用工具 ，创建一些logstash数据并尝试使用logstash示例 （ 请勿在生产集群上使用makelogs）。

维加vs维加莱特


VegaLite是Vega的简化版本，可用于快速入门，但有很多限制。 VegaLite在执行前会自动转换为Vega。 比较logstash-simple_line-vega和logstash-simple_line-vegalite （都使用一些来自Elasticsearch的logstash数据）。 您可以使用此编辑器将VegaLite转换为Vega。

Elasticsearch查询


默认情况下，Vega 数据项可以将内部和外部数据与"url"参数一起使用。 Kibana通过重新加载"url"值添加了对直接Elasticsearch查询的支持。
这是一个Elasticsearch查询的示例，该查询计算所有索引中的文档数。 该查询使用@timestamp字段过滤出时间范围并将其划分为条形段。

 // An object instead of a string for the url value // is treated as a context-aware Elasticsearch query. url: { // Filter the time picker (upper right corner) with this field %timefield%: @timestamp // Apply dashboard context filters when set %context%: true // Which indexes to search index: _all // The body element may contain "aggs" and "query" subfields body: { aggs: { time_buckets: { date_histogram: { // Use date histogram aggregation on @timestamp field field: @timestamp // interval value will depend on the daterange picker // Use an integer to set approximate bucket count interval: { %autointerval%: true } // Make sure we get an entire range, even if it has no data extended_bounds: { min: { %timefilter%: "min" } max: { %timefilter%: "max" } } // Use this for linear (eg line, area) graphs // Without it, empty buckets will not show up min_doc_count: 0 } } } // Speed up the response by only including aggregation results size: 0 } }

完整结果具有以下结构类型：

 { "aggregations": { "time_buckets": { "buckets": [{ "key_as_string": "2015-11-30T22:00:00.000Z", "key": 1448920800000, "doc_count": 28 }, { "key_as_string": "2015-11-30T23:00:00.000Z", "key": 1448924400000, "doc_count": 330 }, ...

请注意， "key"是Unix时间戳，可以不经Vega日期表达式转换而使用。

对于大多数图形，我们只需要一个细分值列表，因此我们使用表达式format: {property: "aggregations.time_buckets.buckets"}仅关注我们需要的数据。

可以使用单个范围和上下文信息面板指定请求。 该查询等效于"%context%": true, "%timefield%": "@timestamp" ，只是将时间范围偏移了10分钟。

 { body: { query: { bool: { must: [ // This string will be replaced // with the auto-generated "MUST" clause "%dashboard_context-must_clause%" { range: { // apply timefilter (upper right corner) // to the @timestamp variable @timestamp: { // "%timefilter%" will be replaced with // the current values of the time filter // (from the upper right corner) "%timefilter%": true // Only work with %timefilter% // Shift current timefilter by 10 units back shift: 10 // week, day (default), hour, minute, second unit: minute } } } ] must_not: [ // This string will be replaced with // the auto-generated "MUST-NOT" clause "%dashboard_context-must_not_clause%" ] } } } }

"%timefilter%"也可用于确定单个最小值或最大值。 如上所示，可以使用两个值（最小值和最大值）设置date_histogram中的extended_bounds。 可以使用"min": {"%timefilter%": "min"}代替硬编码的值，该值将在当前时间范围的开始处被覆盖。 还支持shift和unit值。 可以动态设置“间隔”，具体取决于当前选择的范围： "interval": {"%autointerval%": 10}将尝试获取大约10-15个数据点（段）。

弹性地图文件


这是根据某种机制访问Elastic Map Service文件的能力。

 url: { // "type" defaults to "elasticsearch" otherwise type: emsfile // Name of the file, exactly as in the Region map visualization name: World Countries } // The result is a geojson file, get its features to use // this data source with the "shape" marks // https://vega.imtqy.com/vega/docs/marks/shape/ format: {property: "features"}

维加地图


默认情况下，Kibana贴图可用作Vega图的基础。 要启用，该图必须在主机配置中定义type=map 。

 { "config": { "kibana": { "type": "map", // Initial map position "latitude": 40.7, // default 0 "longitude": -74, // default 0 "zoom": 7, // default 2 // defaults to "default". Use false to disable base layer. "mapStyle": false, // default 0 "minZoom": 5, // defaults to the maximum for the given style, // or 25 when base is disabled "maxZoom": 13, // defaults to true, shows +/- buttons to zoom in/out "zoomControl": false, // defaults to true, disables mouse wheel zoom "scrollWheelZoom": false, // When false, repaints on each move frame. // Makes the graph slower when moving the map "delayRepaint": true, // default true } }, /* the rest of Vega JSON */ }

该可视化将自动嵌入称为"projection" 。 用它来计算所有地理标签的位置。 此外，您可以使用经度，纬度和比例。 这些信号可以在图形中使用，也可以更新以更改地图的位置。

侦错


浏览器调试控制台


使用浏览器工具进行调试（例如，在Chrome中为F12或Ctrl + Shift + J）来检查VEGA_DEBUG变量：* VEGA_DEBUG访问View Vega对象。 有关如何在运行时检查数据和信号的信息，请参见《 Vega调试指南》 。 对于VegaLite， VEGA_DEBUG.view.data('source_0')获取主数据集。 对于Vega，它使用一个数据名称，这在您的Vega规范中是专门的。 * vega_spec的一些修改后，Vega JSON图的vega_spec规范。 对于VegaLite，这是VegaLite编译器的输出。 * vegalite_spec如果它是一个VegaLite图，则在编译VegaLite之前该图的JSON规范

资料


如果您使用的是Elasticsearch查询，请确保接收到的数据符合您的期望。 最简单的方法是使用浏览器调试工具（例如F12）中的“网络”标签。 稍微修改图形，使其进行搜索查询并查看服务器响应。 另一种方法是使用“ Kibana开发工具”选项卡-将索引名称放在第一行中： GET <INDEX_NAME>/_search ，然后在下一行添加查询（仅"query"字段的值）。
如果您需要与他人共享图形，则可以将数据字符串的响应复制到gist.github.com ，可能带有.json扩展名，使用[raw]按钮，然后直接在图形中使用此url。
为了防止Vega使用非ES数据源，请在kibana.yml文件中添加vega.enableExternalUrls: false 。

有用的链接



使用Vega和VegaLite示例


使用Vega和VegaLite示例时 ，您需要修改“数据”部分以使用绝对URL。 例如，将"url": "data/world-110m.json"替换为"url": "https://vega.imtqy.com/editor/data/world-110m.json" 。 同样，在常规的Vega示例中，他们使用"autosize": "pad"布局模型"autosize": "pad"和Kibana使用fit 。 删除所有autosize ， width和height值。 请参见下面的尺寸和位置。

其他配置选项


这些选项特定于Kibana。 卡支持具有其他配置选项。

 { config: { kibana: { // Placement of the Vega-defined signal bindings. // Can be `left`, `right`, `top`, or `bottom` (default). controlsLocation: top // Can be `vertical` or `horizontal` (default). controlsDirection: vertical // If true, hides most of Vega and VegaLite warnings hideWarnings: true // Vega renderer to use: `svg` or `canvas` (default) renderer: canvas } } /* the rest of Vega code */ }

大小和位置


Vega和VegaLite。

默认情况下，Kibana中的Vega图将为Vega和VegaLite图使用autosize autosize = { type: 'fit', contains: 'padding' }布局模型。 fit模型使用所有可用空间，而忽略width和height值，但考虑到缩进值。 您可以通过指定其他autosize值来覆盖此行为。

地图上的维加。

所有Vega图形都将使用零凹痕fit模型忽略autosize ， width ， height和padding 。

可视化检查


许多可视化文件允许您检查可视化文件基础的数据。
要检查可视化效果，请单击编辑器中的“ 检查”按钮，或从“仪表板”面板菜单中选择“ 检查 ”。

初始屏幕显示用于可视化的基本数据。 您可以将数据作为格式或原始格式的逗号分隔值（CSV）文件加载。 格式化将以表格式加载数据。 Raw加载显示的数据-日期为时间戳，不带千位分隔符的数字等。

要查看收集数据的请求， 请从右上方的“ 查看”菜单中选择“ 请求 ”。

可用的视图取决于检查的可视化。

Source: https://habr.com/ru/post/zh-CN442278/

More articles:


All Articles