Vega Lite(天狼星)在我的条形图上显示了第二个x轴。

huangapple go评论68阅读模式
英文:

Vega Lite (deneb) is showing a second x axis on my bar chart

问题

我有一个堆叠的柱状图,使用两个独立的x轴。我希望一个轴位于图表底部,另一个位于顶部。

这是图表的当前状态...

它复制了x轴“b”,并将其放在顶部和底部,而应该只在底部显示“b”,在顶部轴上显示“c”。

这是我目前使用的vega lite代码。我已尝试在所有可能的地方将轴设置为null,但无法关闭顶部副本的“b”。

这是带有当前代码的VegaLite编辑器

英文:

I have a bar chart with bars stacked over each other that is using two separate x-axis. I have each separated axis to be positioned to where one axis is on the bottom of the chart and one is on the top.

Here is the chart in it's current state...

It's duplicating x-axis "b" and putting it on both the top and bottom when it should only display "b" on the bottom and "c" on the top axis.

This is the vega lite code I'm currently using. I've tried to set the axis to null everywhere I could but can not get the top copy of "b" to turn off.

Here is the VegaLite Editor with the current code

答案1

得分: 0

你是指这样吗?

Vega Lite(天狼星)在我的条形图上显示了第二个x轴。

{
"description": "一个带嵌入数据的简单柱状图。",
"data": {
"values": [
{"a": "A", "b": 87, "c": 4},
{"a": "B", "b": 56, "c": 5},
{"a": "C", "b": 77, "c": 6},
{"a": "D", "b": 80, "c": 9},
{"a": "E", "b": 81, "c": 10},
{"a": "F", "b": 53, "c": 10},
{"a": "G", "b": 102, "c": 10},
{"a": "H", "b": 87, "c": 10},
{"a": "I", "b": 91, "c": 1}
]
},
"transform": [
{"joinaggregate": [{"op": "max", "field": "c", "as": "max"}]},
{"calculate": "datum.max * 5", "as": "max"}
],
"params": [
{"name": "max", "expr": "data('data_0')[0]['max']"},
{"name": "min", "expr": "data('data_0')[0]['min']"}
],
"layer": [
{"mark": {"type": "bar", "color": "#5bc2e7", "stroke": "white"}},
{
"mark": {"type": "text", "align": "left"},
"encoding": {
"text": {"field": "c"},
"x": {"field": "b", "type": "quantitative", "title": null, "axis": null}
}
},
{
"mark": {
"type": "rule",
"height": 30,
"point": {
"shape": "M555.3 300.1L424.3 112.8C401.9 81 366.4 64 330.4 64c-22.63 0-45.5 6.75-65.5 20.75C245.2 98.5 231.2 117.5 223.4 138.5C220.5 79.25 171.1 32 111.1 32c-61.88 0-111.1 50.08-111.1 111.1L-.0028 368c0 61.88 50.12 112 112 112s112-50.13 112-112L223.1 218.9C227.2 227.5 231.2 236 236.7 243.9l131.3 187.4C390.3 463 425.8 480 461.8 480c22.75 0 45.5-6.75 65.5-20.75C579 423.1 591.5 351.8 555.3 300.1zM159.1 256H63.99V144c0-26.5 21.5-48 48-48s48 21.5 48 48V256zM354.8 300.9l-65.5-93.63c-7.75-11-10.75-24.5-8.375-37.63c2.375-13.25 9.75-24.87 20.75-32.5C310.1 131.1 320.1 128 330.4 128c16.5 0 31.88 8 41.38 21.5l65.5 93.75L354.8 300.9z",
"yOffset": -15,
"height": 25,
"size": 0.015,
"color": "black"
},
"stroke": "black"
},
"encoding": {
"x": {
"field": "c",
"type": "quantitative",
"title": null,
"scale": {"domain": {"expr": "[0,max]"}},
"axis": {"orient": "top"}
}
}
}
],
"encoding": {
"y": {"field": "a", "type": "nominal", "title": null},
"x": {
"field": "b",
"type": "quantitative",
"title": null,
"axis": {"orient": "bottom"}
}
},
"resolve": {"scale": {"x": "independent"}}
}

英文:

Do you mean like this?

Vega Lite(天狼星)在我的条形图上显示了第二个x轴。

{
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 87, "c": 4},
      {"a": "B", "b": 56, "c": 5},
      {"a": "C", "b": 77, "c": 6},
      {"a": "D", "b": 80, "c": 9},
      {"a": "E", "b": 81, "c": 10},
      {"a": "F", "b": 53, "c": 10},
      {"a": "G", "b": 102, "c": 10},
      {"a": "H", "b": 87, "c": 10},
      {"a": "I", "b": 91, "c": 1}
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "max", "field": "c", "as": "max"}]},
    {"calculate": "datum.max * 5", "as": "max"}
  ],
  "params": [
    {"name": "max", "expr": "data('data_0')[0]['max']"},
    {"name": "min", "expr": "data('data_0')[0]['min']"}
  ],
  "layer": [
    {"mark": {"type": "bar", "color": "#5bc2e7", "stroke": "white"}},
    {
      "mark": {"type": "text", "align": "left"},
      "encoding": {
        "text": {"field": "c"},
        "x": {"field": "b", "type": "quantitative", "title": null, "axis": null}
      }
    },
    {
      "mark": {
        "type": "rule",
        "height": 30,
        "point": {
          "shape": "M555.3 300.1L424.3 112.8C401.9 81 366.4 64 330.4 64c-22.63 0-45.5 6.75-65.5 20.75C245.2 98.5 231.2 117.5 223.4 138.5C220.5 79.25 171.1 32 111.1 32c-61.88 0-111.1 50.08-111.1 111.1L-.0028 368c0 61.88 50.12 112 112 112s112-50.13 112-112L223.1 218.9C227.2 227.5 231.2 236 236.7 243.9l131.3 187.4C390.3 463 425.8 480 461.8 480c22.75 0 45.5-6.75 65.5-20.75C579 423.1 591.5 351.8 555.3 300.1zM159.1 256H63.99V144c0-26.5 21.5-48 48-48s48 21.5 48 48V256zM354.8 300.9l-65.5-93.63c-7.75-11-10.75-24.5-8.375-37.63c2.375-13.25 9.75-24.87 20.75-32.5C310.1 131.1 320.1 128 330.4 128c16.5 0 31.88 8 41.38 21.5l65.5 93.75L354.8 300.9z",
          "yOffset": -15,
          "height": 25,
          "size": 0.015,
          "color": "black"
        },
        "stroke": "black"
      },
      "encoding": {
        "x": {
          "field": "c",
          "type": "quantitative",
          "title": null,
          "scale": {"domain": {"expr": "[0,max]"}},
          "axis": {"orient": "top"}
        }
      }
    }
  ],
  "encoding": {
    "y": {"field": "a", "type": "nominal", "title": null},
    "x": {
      "field": "b",
      "type": "quantitative",
      "title": null,
      "axis": {"orient": "bottom"}
    }
  },
  "resolve": {"scale": {"x": "independent"}}
}

huangapple
  • 本文由 发表于 2023年3月20日 22:49:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75791788.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定