Un cinquième de la traduction de la documentation officielle de visualisation des données à Kibana.
Lien vers le matériel original:
Guide de l'utilisateur de Kibana [6.6] »VisualiserLien vers la partie 1:
Guide de l'utilisateur de Kibana. Visualisation. Partie 1Lien vers la partie 2:
Guide de l'utilisateur de Kibana. Visualisation. 2e partieLien vers la partie 3:
Guide de l'utilisateur de Kibana. Visualisation. 3e partieLien vers la partie 4:
Guide de l'utilisateur de Kibana. Visualisation. Partie 4Lien vers la partie 5:
Guide de l'utilisateur de Kibana. Visualisation. Partie 5Contenu:
1. Graphiques Vega
2. Inspection des visualisations
Counts Vega
Avertissement Cette fonctionnalité est expérimentale et pourra être modifiée ou supprimée dans une future version. Elastic fera de son mieux pour résoudre les problèmes, mais les fonctions expérimentales ne sont pas prises en charge par les fonctions officielles de SLA GA.
Vous pouvez créer des visualisations des
données Vega et
VegaLite dans Kibana, à la fois hors ligne et en haut de la carte. Pour voir Vega en action, regardez cette
courte vidéo de présentation .
Commencez avec Vega
Suivez ces étapes pour créer votre première visualisation Vega.
- Dans Kibana, sélectionnez Visualiser et ajoutez une visualisation Vega. Vous devriez voir le graphique par défaut.
- Essayez de changer la
mark de line en point , area , bar , circle , square , ... (voir documentation ). - Essayez le reste des visualisations Vega ou VegaLite. Vous devrez peut-être rendre les URL absolues, par exemple remplacer
"url": "data/world-110m.json" par "url": "https://vega.imtqy.com/editor/data/world-110m.json" (voir note ci-dessous). - À l'aide de l' utilitaire makelogs , créez des données logstash et essayez les exemples logstash ( N'utilisez pas makelogs sur un cluster de production).
Vega vs VegaLite
VegaLite est une version simplifiée de Vega, utile pour un démarrage rapide, mais avec un certain nombre de limitations. VegaLite est automatiquement converti en Vega avant exécution. Comparez
logstash-simple_line-vega et
logstash-simple_line-vegalite (les deux utilisent certaines données logstash d'Elasticsearch). Vous pouvez utiliser
cet éditeur pour convertir VegaLite en Vega.
Requêtes Elasticsearch
Par défaut, un élément de
données Vega peut utiliser des données internes et externes avec le paramètre
"url" . Kibana ajoute la prise en charge des requêtes Elasticsearch directes en rechargeant la valeur d'
"url" .
Voici un exemple de requête Elasticsearch qui compte le nombre de documents dans tous les index. La requête utilise le champ
@timestamp pour filtrer la plage de temps et la diviser en segments d'histogramme.
// 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 } }
Le résultat complet a le type de structure suivant:
{ "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 }, ...
Notez que
"key" est un horodatage Unix et peut être utilisé sans conversion par des expressions de date Vega.
Pour la plupart des graphiques, nous n'avons besoin que d'une liste de valeurs de segment, nous utilisons donc le
format: {property: "aggregations.time_buckets.buckets"} expression
format: {property: "aggregations.time_buckets.buckets"} pour nous concentrer uniquement sur les données dont nous avons besoin.
La demande peut être spécifiée avec une plage individuelle et un panneau d'informations contextuelles. Cette requête équivaut à
"%context%": true, "%timefield%": "@timestamp" , sauf pour le décalage de la plage horaire il y a 10 minutes.
{ 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%" peut également être utilisé pour déterminer une valeur minimale ou maximale unique. Comme indiqué ci-dessus,
extended_bounds dans date_histogram peut être défini avec deux valeurs - minimum et maximum. Au lieu de valeurs codées en dur, vous pouvez utiliser
"min": {"%timefilter%": "min"} , qui sera écrasé au début de la plage de temps actuelle.
shift valeurs de
shift et d'
unit sont également prises en charge. L '"intervalle" peut être défini dynamiquement, en fonction de la plage actuellement sélectionnée:
"interval": {"%autointerval%": 10} essaiera d'obtenir environ 10-15 points de données (segments).
Fichiers de carte élastique
Il s'agit de la possibilité d'accéder aux fichiers Elastic Map Service selon un mécanisme.
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"}
Vega avec carte
La carte Kibana par défaut peut être utilisée comme base pour le graphique Vega. Pour l'activer, le graphique doit définir
type=map dans la configuration de l'hôte.
{ "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 */ }
Cette visualisation embarquera automatiquement une projection appelée
"projection" . Utilisez-le pour calculer la position de toutes les balises géo-orientées. De plus, vous pouvez utiliser la longitude, la latitude et l'échelle. Ces signaux peuvent être utilisés dans le graphique ou mis à jour pour modifier le positionnement de la carte.
Débogage
Console de débogage du navigateur
Utilisez les outils du navigateur pour le débogage (par exemple, F12 ou Ctrl + Maj + J dans Chrome) pour inspecter la variable
VEGA_DEBUG : *
view - accès à View the Vega object. Consultez le
Guide de débogage Vega pour savoir comment inspecter les données et les signaux lors de l'exécution. Pour VegaLite,
VEGA_DEBUG.view.data('source_0') obtient le jeu de données principal. Pour Vega, cela utilise un nom de données, qui est spécifiquement dans votre spécification Vega. * Spécification
vega_spec du graphe Vega JSON après quelques modifications de Kibana. Dans le cas de VegaLite, il s'agit de la sortie du compilateur VegaLite. *
vegalite_spec - s'il s'agit d'un graphe VegaLite, la spécification JSON du graphe avant de compiler VegaLite
Les données
Si vous utilisez une requête Elasticsearch, assurez-vous que les données reçues correspondent à vos attentes. La façon la plus simple de voir cela est d'utiliser l'onglet «mise en réseau» dans les outils de débogage de votre navigateur (par exemple, F12). Modifiez un peu le graphique pour qu'il fasse une requête de recherche et examine la réponse du serveur. Une autre approche consiste à utiliser l'onglet
Kibana Dev Tools - placez le nom de l'index à l'intérieur de la première ligne:
GET <INDEX_NAME>/_search , et ajoutez votre requête à la ligne suivante (uniquement la valeur du champ
"query" ).
Si vous devez partager le graphique avec quelqu'un, vous pouvez copier la réponse de la chaîne de données sur
gist.github.com , éventuellement avec l'extension .json, utiliser le bouton [raw] et utiliser cette URL directement dans votre graphique.
Pour empêcher Vega d'utiliser des sources de données non ES, ajoutez
vega.enableExternalUrls: false au fichier kibana.yml.
Liens utiles
Utilisation des exemples Vega et VegaLite
Lorsque vous utilisez les
exemples Vega et
VegaLite , vous devez modifier la section «données» pour utiliser une URL absolue. Par exemple, remplacez
"url": "data/world-110m.json" par
"url": "https://vega.imtqy.com/editor/data/world-110m.json" . De plus, dans les exemples réguliers de Vega, ils utilisent le modèle de mise en page à
"autosize": "pad" , et Kibana utilise
fit . Supprimez toutes les valeurs de
height autosize , de
width et de
height . Voir ci-dessous dimensions et positionnement.
Options de configuration supplémentaires
Ces options sont spécifiques à Kibana. Le support de carte a des options de configuration supplémentaires.
{ 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 */ }
Taille et position
Vega et VegaLite.
Par défaut, les graphiques Vega dans Kibana utiliseront le
autosize = { type: 'fit', contains: 'padding' } pour les graphiques Vega et VegaLite. Le modèle d'
fit utilise tout l'espace disponible, en ignorant les valeurs de
width et de
height , mais prend en compte les valeurs de retrait. Vous pouvez remplacer ce comportement en spécifiant une valeur de
autosize différente.
Vega sur la carte.
Tous les graphiques Vega
autosize , la
width , la
height et le
padding utilisant le modèle d'
fit retrait.
Inspection de visualisation
De nombreuses visualisations vous permettent d'inspecter les données sous-jacentes à la visualisation.
Pour inspecter la visualisation, cliquez sur le bouton
Inspecter dans l'éditeur ou sélectionnez
Inspecter dans le menu du panneau Tableau de bord.
L'écran initial affiche les données de base pour la visualisation. Vous pouvez charger des données sous forme de fichier CSV (valeurs séparées par des virgules) aux formats
formaté ou
brut .
Formaté charge les données au format tableau.
Raw charge les données telles que présentées - dates sous forme d'horodatages, nombres sans millièmes séparateurs, etc.
Pour afficher les demandes qui collectent des données, sélectionnez
Demandes dans le menu
Affichage en haut à droite.
Les vues disponibles dépendent de la visualisation inspectée.