Clever Geek Handbook

Kibanaユーザーガイド。 視覚化。 パート6

Kibanaの公式データ視覚化文書の翻訳の5番目。



元の資料へのリンク： Kibanaユーザーガイド[6.6]»視覚化



パート1： Kibanaユーザーガイドへのリンク。 視覚化。 パート1

パート2へのリンク： Kibanaユーザーガイド。 視覚化。 パート2

パート3へのリンク： Kibanaユーザーガイド。 視覚化。 パート3

パート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.github.io/editor/data/world-110m.json"



    "url": "data/world-110m.json"



    "url": "https://vega.github.io/editor/data/world-110m.json"



    （下記の注を参照）。
  4. makelogsユーティリティを使用して、 logstashデータを作成し、 logstashの例を試してください （ 実稼働クラスターではmakelogsを使用しないでください）。


Vega vs VegaLite



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"}



という表現format: {property: "aggregations.time_buckets.buckets"}



を使用して、必要なデータのみに焦点を合わせます。



リクエストは、個々の範囲とコンテキスト情報パネルで指定できます。 このクエリは、 "%context%": true, "%timefield%": "@timestamp"



と"%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



は、最小値と最大値の2つの値を設定できます。 値をハードコーディングする代わりに、 "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.github.io/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



変数を検査します。* 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）の[ネットワーク]タブを使用することです。 グラフを少し変更して、検索クエリを作成し、サーバーの応答を確認します。 もう1つの方法は、 Kibana Dev Toolsタブを使用することです。最初の行にインデックス名を配置します： 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.github.io/editor/data/world-110m.json"



に置き換え"url": "https://vega.github.io/editor/data/world-110m.json"



。 また、通常のVegaの例では、 "autosize": "pad"



レイアウトモデル"autosize": "pad"



を使用し、 "autosize": "pad"



は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。



デフォルトでは、 autosize = { type: 'fit', contains: 'padding' }



Vegaグラフは、VegaおよびVegaLiteグラフのautosize = { type: 'fit', contains: 'padding' }



レイアウトモデルを使用します。 fit



モデルは、 width



とheight



値を無視して、使用可能なすべてのスペースを使用しますが、インデント値を考慮します。 別のautosize



値を指定することにより、この動作をオーバーライドできます。



マップ上のベガ。



すべてのVegaグラフは、ゼロインデントfit



モデルを使用してautosize



、 width



、 height



およびpadding



を無視しpadding



。



可視化検査



多くのビジュアライゼーションでは、ビジュアライゼーションの基になるデータを検査できます。

ビジュアライゼーションを検査するには、エディターの「 検査」ボタンをクリックするか、ダッシュボードパネルメニューから「 検査」を選択します。



初期画面には、視覚化のための基本データが表示されます。 データをフォーマット済みまたはRaw形式のコンマ区切り値（CSV）ファイルとしてロードできます。 フォーマット済みは、テーブル形式でデータをロードします。 Rawは提示されたとおりにデータをロードします-タイムスタンプとしての日付、小数点のない数字など。



データを収集するリクエストを表示するには、右上の[表示 ]メニューから[ リクエスト ]を選択します。



使用可能なビューは、検査された視覚化によって異なります。


More articles:


All Articles