Question

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

我当前的编码是：

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

我希望突出显示/粗体显示月份中的日期（而不是时间），以便它们容易脱颖而出。还希望所有这些天标签都包含月份，而不是星期几，所以我得到的是'Mon 07'，而不是'Oct 07'。这可能吗？

Answer 1

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

Vega-Lite文档中的Line Chart With Conditional Axis Properties示例显示了一种与您的问题相关的可能方法。

以下是您可能专门针对像您的{editor）这样的多天小时数据进行操作的示例：

{
  "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}
    ]
  }
}

维加图表轴上的突出显示/粗体标签

1 个答案: