如何在分类刻度上设置X轴上下限以消除图表空白？

要去掉图表里分类X轴两端的空白，直接在X轴的编码配置里指定scale的domain为你的数据中首尾两个分类值就行。

修改后的完整代码如下：

{
  "data": {
    "values": [
      {"__row__": 0,"calendar_month_year": "Dec-23","concentration_risk_monthly": 0.51},
      {"__row__": 1,"calendar_month_year": "Jan-24","concentration_risk_monthly": 0.5},
      {"__row__": 2,"calendar_month_year": "Feb-24","concentration_risk_monthly": 0.27},
      {"__row__": 3,"calendar_month_year": "Mar-24","concentration_risk_monthly": 0.22},
      {"__row__": 4,"calendar_month_year": "Apr-24","concentration_risk_monthly": 0.25},
      {"__row__": 5,"calendar_month_year": "May-24","concentration_risk_monthly": 0.22}
    ]
  },
  "mark": {
    "type": "area",
    "point": {"size": 70},
    "color": {
      "x1": 1,"y1": 1,"x2": 1,"y2": 0,
      "gradient": "linear",
      "stops": [
        {"offset": 0.0,"color": "#00800166"},
        {"offset": 0.26,"color": "#F7B50066"},
        {"offset": 0.57,"color": "#A9281F66"},
        {"offset": 1.0,"color": "#A9281F66"}
      ]
    }
  },
  "encoding": {
    "x": {
      "field": "calendar_month_year",
      "type": "ordinal",
      "sort": {"field": "__row__"},
      "point": true,
      "axis": {"title": null},
      "scale": {"domain": ["Dec-23", "May-24"]} // 新增配置限定X轴范围
    },
    "y": {
      "field": "concentration_risk_monthly",
      "type": "quantitative",
      "axis": {"title": null}
    }
  }
}

关键修改说明 #

• 在X轴的encoding配置里新增"scale": {"domain": ["Dec-23", "May-24"]}，直接把X轴的取值范围限定为数据中的第一个和最后一个分类值，强制图表从第一个分类起始、到最后一个分类结束，彻底消除两侧的空白区域。

内容的提问来源于stack exchange，提问作者Tyler Rinker