使用 vegalite 和 observable 将列的名称移动到 x 轴

Question

我正在使用 VegaLite 并在 Observable notebook 中工作。我需要交换顶部列和 x 轴的标签，以便我在顶部显示状态，在底部 x 轴上显示名称。

vegalite({
  width: 50,
  data: { values: StackVega },
  mark: 'bar',
  encoding: {
    column: {
      field: "new_name",
      type: "nominal",
      spacing: 2,
      title: "Name",
    // axis: {orient: "bottom"}
    },
    y: {
      type: "quantitative",
      aggregate: "sum",
      field: "new_rate",
      title: "Rate",
      axis: { grid: false }
    },
    x: { type: "nominal", field: "stat", axis: { title: "" } },
    color: {
      type: "nominal",
      field: "stat",
      scale: { range: ["#675193", "#ca8861"] }
    }
  },
  config: {
    view: { stroke: "transparent" },
    axis: { domainWidth: 1 }
  }
})

我曾尝试添加 axis: {orient: "bottom"} 但那没有用，如果我用列和 x 交换字段，它会破坏图表。

Answer 1

列标签不受 axis 控制，它们受 header 控制。使用 header: {"labelOrient": "bottom"}。有关详细信息，请参阅 Header。

使用 vegalite 和 observable 将列的名称移动到 x 轴

move the names of the columns to x-axis with vegalite and observable

orientation

bar-chart

observable

vega-lite