学习在 Kibana 构建丰富的 Vega 可视化 | Elastic Blog
工程

Kibana 中 Vega 可视化入门

Vega Kibana 6.2 Elasticsearch Vega Vega-Lite Vega

Vega - Vega 便 Elasticsearch Hello Vega!

Text Mark Example

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "width":100, "height":30,
  "background": "#eef2e8",
  "padding":5,
  "marks": [
    {
      "type": "text",
      "encode": {
        "update": {
          "text":     { "value":"Hello Vega!" },
          "align":    { "value": "center"},
          "baseline": { "value": "middle"},
          "stroke":   { "value": "#A32299" },
          "angle":    { "value":15 },
          "x":        { "signal": "width/2" },
          "y":        { "signal": "height/2" }
        }
      }
    }
  ]
}

线update x y

$schema Vega IDBackground 使width height Kibana autosize fit pad height width padding

使 Kibana使 Elasticsearch vals 4 2 - category count 使 category x count y 0

Rect Mark Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":300, "height":100,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":50,  "count":30},
      {"category":100, "count":80},
      {"category":150, "count":10},
      {"category":200, "count":50}
    ]
  } ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"field": "category"},
        "width": {"value":30},
        "y":     {"field": "count"},
        "y2":    {"value":0}
      }
    }
  } ]
}

rect vals x y

Vega

使 线 - domain count 1000..8000 count=0 0..99 y y2 "scale": "yscale" 使 yscale count 0 99 8000 - - 0 height 使 0

Rect Mark with Scaling Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":100,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":50,  "count":3000},
      {"category":100, "count":8000},
      {"category":150, "count":1000},
      {"category":200, "count":5000}
    ]
  } ],
 "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "count"},
      "range": "height"
    }
  ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"field": "category"},
        "width": {"value":30},
        "y":     {"scale": "yscale", "field": "count"},
        "y2":    {"scale": "yscale", "value":0}
      }
    }
  } ]
}

15 + Vega - 使 4 400/4 5% {"scale": "xscale", "band":1} width 100%

Rect Mark with Band Scaling Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":100,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":"Oranges", "count":3000},
      {"category":"Pears",   "count":8000},
      {"category":"Apples",  "count":1000},
      {"category":"Peaches", "count":5000}
    ]
  } ],
 "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "vals", "field": "category"},
      "range": "width",
      "padding":0.05
    }
  ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"scale": "xscale", "field": "category"},
        "width": {"scale": "xscale", "band":1},
        "y":     {"scale": "yscale", "field": "count"},
        "y2":    {"scale": "yscale", "value":0}
      }
    }
  } ]
}

使

Rect Mark with Axes Example

  "axes": [
    {"scale": "yscale", "orient": "left"},
    {"scale": "xscale", "orient": "bottom"}
  ],

"autosize": "fit"

Vega 使 count 333使 666 666绿

Random Data Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":200,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":"Oranges"},
      {"category":"Pears"},
      {"category":"Apples"},
      {"category":"Peaches"},
      {"category":"Bananas"},
      {"category":"Grapes"}
    ],
    "transform": [
      {"type": "formula", "as": "count", "expr": "random()*1000"}
    ]
  } ],
 "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "vals", "field": "category"},
      "range": "width",
      "padding":0.05
    }
  ],
  "axes": [
    {"scale": "yscale", "orient": "left"},
    {"scale": "xscale", "orient": "bottom"}
  ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"scale": "xscale", "field": "category"},
        "width": {"scale": "xscale", "band":1},
        "y":     {"scale": "yscale", "field": "count"},
        "y2":    {"scale": "yscale", "value":0},
        "fill":  [
          {"test": "datum.count < 333", "value": "red"},
          {"test": "datum.count < 666", "value": "yellow"},
          {"value": "green"}
        ]
      }
    }
  } ]
}

Elasticsearch Kibana

Elasticsearch 线 Kibana Vega 使 Vega Vega KibanaVega

使values使url KibanaElasticsearch Vega url values Kibana

使 Kibana Elasticsearch

   "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "_all",
      "body": {
        "aggs": {
          "time_buckets": {
            "date_histogram": {
              "field": "@timestamp",
              "interval": {"%autointerval%": true},
              "extended_bounds": {
                "min": {"%timefilter%": "min"},
                "max": {"%timefilter%": "max"}
              },
              "min_doc_count":0
            }
          }
        },
        "size":0
      }

:

     "aggregations": {
        "time_buckets": {
          "buckets": [
            {"key":1528061400000, "doc_count":1},
            {"key":1528063200000, "doc_count":45},
            {"key":1528065000000, "doc_count":49},
            {"key":1528066800000, "doc_count":17},
...

aggregations.time_buckets.buckets Vega "format": {"property": "aggregations.time_buckets.buckets"}

x Vega 使 UNIX xscale 使 key doc_count line x y 线 formatlabelAngletickCount x

Elasticsearch search result example

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":200,
  "data": [
    {
      "name": "vals",
      "values": {
        "aggregations": {
          "time_buckets": {
            "buckets": [
              {"key":1528063200000, "doc_count":45},
              {"key":1528065000000, "doc_count":49},
              {"key":1528068600000, "doc_count":32},
              {"key":1528072200000, "doc_count":12},
              {"key":1528074000000, "doc_count":10},
              {"key":1528075800000, "doc_count":10},
              {"key":1528083000000, "doc_count":2},
              {"key":1528088400000, "doc_count":3},
              {"key":1528092000000, "doc_count":9},
              {"key":1528093800000, "doc_count":15},
              {"key":1528095600000, "doc_count":13},
              {"key":1528097400000, "doc_count":19},
              {"key":1528099200000, "doc_count":33},
              {"key":1528101000000, "doc_count":20},
              {"key":1528102800000, "doc_count":55},
              {"key":1528104600000, "doc_count":68},
              {"key":1528108200000, "doc_count":70},
              {"key":1528110000000, "doc_count":108},
              {"key":1528113600000, "doc_count":151},
              {"key":1528117200000, "doc_count":206},
              {"key":1528122600000, "doc_count":258},
              {"key":1528129800000, "doc_count":250},
              {"key":1528135200000, "doc_count":220}
            ]
          }
        }
      },
      "format": {"property": "aggregations.time_buckets.buckets"}
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "doc_count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "time",
      "domain": {"data": "vals", "field": "key"},
      "range": "width"
    }
  ],
  "axes": [
    {"scale": "yscale", "orient": "left"},
    {"scale": "xscale", "orient": "bottom"}
  ],
  "marks": [
    {
      "type": "line",
      "from": {"data": "vals"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "key"},
          "y": {"scale": "yscale", "field": "doc_count"}
        }
      }
    }
  ]
}

Vega Elasticsearch

Vega