elasticsearch - 如何使图表 c 两种类型：正常和堆叠？

Question

我想在一个视觉中有两个类型图。 所需示例 当前示例，编辑器

标签： elasticsearchkibanavisualizationvega-litevega

Answer 1

您可以使用具有条形图而不是柱形图的 2 层。第一层将是一个堆叠层，其中应用了过滤器used和free字段。第二层可以有total场。使用xOffset您可以定位两个条形图。请参阅下面的代码或编辑器：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"view": {"stroke": "transparent"}, "axis": {"domainWidth": 1}},
  "width": 300,
  "data": {
    "values": [
      {"branch": "V", "free": 300, "used": 800, "total": 1000},
      {"branch": "K", "free": 100, "used": 400, "total": 500},
      {"branch": "D", "free": 100, "used": 200, "total": 300}
    ]
  },
  "transform": [
    {"calculate": "[ datum.used, datum.free, datum.total]", "as": "table"},
    {"calculate": "['used', 'free', 'total']", "as": "headline"},
    {"flatten": ["table", "headline"]},
    {
      "calculate": "datum.headline +':'+ datum.table + ' ('+round(datum.table *100/ datum.total)+'%)'",
      "as": "tooltip"
    }
  ],
  "encoding": {
    "y": {"aggregate": "sum", "field": "table", "axis": {"grid": false}},
    "x": {
      "field": "branch",
      "axis": {"grid": false, "domain": false, "labelAngle": 0, "ticks": false},
      "sort": {"op": "sum", "field": "table", "order": "descending"}
    },
    "tooltip": {"field": "tooltip", "type": "nominal"},
    "color": {
      "field": "headline",
      "type": "nominal",
      "scale": {"range": ["#409b66", "#878787", "#1b5c9e"]}
    }
  },
  "layer": [
    {
      "transform": [
        {"filter": {"field": "headline", "oneOf": ["used", "free"]}}
      ],
      "mark": {"type": "bar", "width": 15, "xOffset": -10}
    },
    {
      "mark": {"type": "bar", "width": 15, "xOffset": 8},
      "encoding": {
        "y": {"field": "total", "axis": {"grid": false}, "stack": false}
      }
    }
  ]
}