vega - vega图表轴上的突出显示/粗体标签

Question

是否可以突出显示轴上的某些标签？

我目前的编码是：

"encoding": {
       "x": { "field": "date", "type": "temporal", "axis": { "title": "Date", "grid": false } },
       "y": { "field": "value", "type": "quantitative", "axis": { "format": "d" } 
 }

我希望每月的日子（而不是时间）突出/粗体，以便它们轻松脱颖而出。还希望所有这些日期标签都包括月份，而不是一周中的哪一天，所以'Mon 07'我得到想要'Oct 07'的不是'Oct 06'. 这可能吗？

标签： vegavega-lite

Answer 1

您不能根据标签值更改字体样式，但可以使用axis.labelExpr根据条件更改标签的值。

Vega-Lite 文档中的带有条件轴属性的折线图示例显示了一种与您的问题相关的可能方法。

这是一个示例，说明您可能专门针对像您这样的多天每小时数据（编辑器）：

{
  "mark": "line",
  "encoding": {
    "x": {
      "type": "temporal",
      "field": "x",
      "axis": {
        "tickCount": 12,
        "labelAlign": "left",
        "labelOffset": 2,
        "labelExpr": "[timeFormat(datum.value, '%H:%M'), timeFormat(datum.value, '%H') == '00' ? timeFormat(datum.value, '%b %d') : '']"
      }
    },
    "y": {"type": "quantitative", "field": "y"}
  },
  "width": 800,
  "data": {
    "values": [
      {"x": "2020-01-01T00:00:00", "y": -0.29},
      {"x": "2020-01-01T02:00:00", "y": -0.59},
      {"x": "2020-01-01T04:00:00", "y": 0.12},
      {"x": "2020-01-01T06:00:00", "y": -0.24},
      {"x": "2020-01-01T08:00:00", "y": -0.34},
      {"x": "2020-01-01T10:00:00", "y": -0.55},
      {"x": "2020-01-01T12:00:00", "y": -0.02},
      {"x": "2020-01-01T14:00:00", "y": 0.66},
      {"x": "2020-01-01T16:00:00", "y": 1.51},
      {"x": "2020-01-01T18:00:00", "y": 0.98},
      {"x": "2020-01-01T20:00:00", "y": 0.06},
      {"x": "2020-01-01T22:00:00", "y": 0.31},
      {"x": "2020-01-02T00:00:00", "y": 0.42},
      {"x": "2020-01-02T02:00:00", "y": 0.56},
      {"x": "2020-01-02T04:00:00", "y": 1.05},
      {"x": "2020-01-02T06:00:00", "y": 1.1},
      {"x": "2020-01-02T08:00:00", "y": 1.93},
      {"x": "2020-01-02T10:00:00", "y": 2.12},
      {"x": "2020-01-02T12:00:00", "y": 1.41},
      {"x": "2020-01-02T14:00:00", "y": 2.22},
      {"x": "2020-01-02T16:00:00", "y": 2.99},
      {"x": "2020-01-02T18:00:00", "y": 3.51},
      {"x": "2020-01-02T20:00:00", "y": 4.02},
      {"x": "2020-01-02T22:00:00", "y": 1.92},
      {"x": "2020-01-03T00:00:00", "y": 2.05},
      {"x": "2020-01-03T02:00:00", "y": 2.19},
      {"x": "2020-01-03T04:00:00", "y": 2.28},
      {"x": "2020-01-03T06:00:00", "y": 3.15},
      {"x": "2020-01-03T08:00:00", "y": 2.8},
      {"x": "2020-01-03T10:00:00", "y": 2.66},
      {"x": "2020-01-03T12:00:00", "y": 3.16},
      {"x": "2020-01-03T14:00:00", "y": 3.28},
      {"x": "2020-01-03T16:00:00", "y": 3.06},
      {"x": "2020-01-03T18:00:00", "y": 2.63},
      {"x": "2020-01-03T20:00:00", "y": 1.53},
      {"x": "2020-01-03T22:00:00", "y": 1.16},
      {"x": "2020-01-04T00:00:00", "y": 1.45},
      {"x": "2020-01-04T02:00:00", "y": -0.51},
      {"x": "2020-01-04T04:00:00", "y": -1.04},
      {"x": "2020-01-04T06:00:00", "y": -1.95},
      {"x": "2020-01-04T08:00:00", "y": -2.57},
      {"x": "2020-01-04T10:00:00", "y": -2.65},
      {"x": "2020-01-04T12:00:00", "y": -3.39},
      {"x": "2020-01-04T14:00:00", "y": -3.296},
      {"x": "2020-01-04T16:00:00", "y": -2.45},
      {"x": "2020-01-04T18:00:00", "y": -2.44},
      {"x": "2020-01-04T20:00:00", "y": -2.14},
      {"x": "2020-01-04T22:00:00", "y": -0.82},
      {"x": "2020-01-05T00:00:00", "y": 0.3},
      {"x": "2020-01-05T02:00:00", "y": 1.04}
    ]
  }
}