Vega-Lite 图表 x 轴显示不显示新年开始后的月份

Question

我有一个图表，日期格式为 yyyy-mm-dd，类型为 'temporal'。它还使用自定义轴

chartAxis = {
  const obj = {};
  (obj.grid = false),
    (obj.tickCount = { interval: 'month', step: 1 }),
    (obj.labelAlign = 'left'),
    (obj.labelExpr = 'datum.label[0]');
  return obj;
}

从年初开始，开始显示年份的第一个数字，而不是月份的第一个字母。

我很茫然。有什么想法吗？

Answer 1

Vega-Lite 选择的默认日期显示取决于显示的日期范围和每个标签之间的 space，并且在年份转换时它通常会显示新的年份。这是一个简单的例子：

{
  "data": {
    "values": [
      {"date": "2020-10-31T00:00:00", "value": 9},
      {"date": "2020-11-30T00:00:00", "value": 10},
      {"date": "2020-12-31T00:00:00", "value": 11},
      {"date": "2021-01-31T00:00:00", "value": 12},
      {"date": "2021-02-28T00:00:00", "value": 13}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"type": "temporal", "field": "date"},
    "y": {"type": "quantitative", "field": "value"}
  }
}

如果您使用自定义转换来显示第一个字符，那么在年份转换时第一个字符将为 "2"。

如果您想准确控制日期的格式，可以通过在 axis.format:

中指定 d3-date-format 代码来实现

{
  "data": {
    "values": [
      {"date": "2020-10-31T00:00:00", "value": 9},
      {"date": "2020-11-30T00:00:00", "value": 10},
      {"date": "2020-12-31T00:00:00", "value": 11},
      {"date": "2021-01-31T00:00:00", "value": 12},
      {"date": "2021-02-28T00:00:00", "value": 13}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"type": "temporal", "field": "date", "axis": {"format": "%b"}},
    "y": {"type": "quantitative", "field": "value"}
  }
}

Vega-Lite 图表 x 轴显示不显示新年开始后的月份

Vega-Lite chart x-axis display not displaying month after the start of the new year

vega-lite