vega lite图表轴标签问题

Question

我已将这个给定的示例图表 (circle_custom_tick_labels) https://vega.github.io/editor/#/examples/vega-lite/circle_custom_tick_labels 用于 vega lite

{
"data": {
"values": [{"IMDB Rating":1}, 
{"IMDB Rating":3},
{"IMDB Rating":6},
{"IMDB Rating":72},
{"IMDB Rating":5},
{"IMDB Rating":144},
{"IMDB Rating":217},
{"IMDB Rating":7200},
{"IMDB Rating":7220},
{"IMDB Rating":14400},
{"IMDB Rating":14420},
{"IMDB Rating":21600},    
{"IMDB Rating":23698},
{"IMDB Rating":25599},
{"IMDB Rating":28800}
]
},
"mark": {"type": "tick"},
"encoding": {
"x": { 
  "axis": {
    "labelExpr": "datum.label == 0 ? 'A' : datum.label == 7200 ? 'B': datum.label == 14400 ? 'C': datum.label == 21600 ? 'D' : 'E'",
    "labelFlush": false,       
    "values": [0, 7200, 14400, 21600, 28800]
  },
  "field": "IMDB Rating",
  "type": "quantitative",      
  "scale": {"domain": [0, 28800]},
  "title": null
},
"color": {        
    "condition": [
        {"test": "datum['IMDB Rating'] < 14400", "value": "green"},
        {"test": "datum['IMDB Rating'] == 14400 ", "value": "red"},
        {"test": "datum['IMDB Rating']  >14400 ", "value": "blue"}],
       "value": "white"
    }       

}

当我更改数据集并给出以千为单位的大值时，以及像

这样的轴标签的大值

 "axis": {
"labelExpr": "datum.label == 0 ? 'A' : datum.label == 7200 ? 'B': datum.label == 14400 ? 'C': datum.label == 21600 ? 'D' : 'E'",
"labelFlush": false,       
"values": [0, 7200, 14400, 21600, 28800]
}

然后 x 轴的标签显示不正确。它应该替换为

0 -> A,
7200 -> B,
14400 -> C,
21600 -> D,
28800 -> E

但它显示为 enter image description here

对于较小的值，它可以正常工作，如下所示：

 {   
  "data": {
    "values": [{"IMDB Rating":1}, 
    {"IMDB Rating":1},
    {"IMDB Rating":2},
    {"IMDB Rating":3},
    {"IMDB Rating":4},
    {"IMDB Rating":5},
    {"IMDB Rating":6},
    {"IMDB Rating":7},
    {"IMDB Rating":8},
    {"IMDB Rating":3.2},
    {"IMDB Rating":4.5}
  ]
  },
  "mark": {"type": "tick"},
  "encoding": {
    "x": { 
      "axis": {
        "labelExpr": "datum.label == 0 ? 'A' : datum.label == 2 ? 'B': datum.label == 4 ? 'C': datum.label == 6 ? 'D' : 'E'",
        "labelFlush": false,       
        "values": [0, 2, 4, 6, 8]
      },
      "field": "IMDB Rating",
      "type": "quantitative",      
      "scale": {"domain": [0, 10]},
      "title": null
    },
    "color": {        
        "condition": [
            {"test": "datum['IMDB Rating'] < 5", "value": "green"},
            {"test": "datum['IMDB Rating'] == 5 ", "value": "red"},
            {"test": "datum['IMDB Rating']  >5 ", "value": "blue"}],
           "value": "white"
        }       
  
  }
}

enter image description here

Answer 1

您对 labelExpr 的配置几乎是正确的，只是条件无法正常工作，因为您正在与似乎是字符串的 datum.label 进行比较，因此如果您将条件提供为 datum.label == '7,200'（注意：我在 7200 左右提供了单引号）然后它会在您的轴上正确显示标签 B。

但这不是更好的方法，因为你的数据输入值是数字格式，你不应该根据你的输出来比较它。相反，您可以将条件与 label.value 比较为 datum.value == 7200，这将在不更改值类型的情况下正常工作。

以下是代码片段或参考editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "data": {
    "values": [
      {"IMDB Rating": 1},
      {"IMDB Rating": 3},
      {"IMDB Rating": 6},
      {"IMDB Rating": 72},
      {"IMDB Rating": 5},
      {"IMDB Rating": 144},
      {"IMDB Rating": 217},
      {"IMDB Rating": 7200},
      {"IMDB Rating": 7220},
      {"IMDB Rating": 14400},
      {"IMDB Rating": 14420},
      {"IMDB Rating": 21600},
      {"IMDB Rating": 23698},
      {"IMDB Rating": 25599},
      {"IMDB Rating": 28800}
    ]
  },
  "mark": {"type": "tick"},
  "encoding": {
    "x": {
      "axis": {
        "labelExpr": "datum.value == 0 ? 'A' : datum.value == 7200 ? 'B': datum.value == 14400 ? 'C': datum.value == 21600 ? 'D' : 'E'",
        "labelFlush": false,
        "formatType": "number",
        "values": [0, 7200, 14400, 21600, 28800]
      },
      "field": "IMDB Rating",
      "type": "quantitative",
      "scale": {"domain": [0, 28800]},
      "title": null
    },
    "color": {
      "condition": [
        {"test": "datum['IMDB Rating'] < 14400", "value": "green"},
        {"test": "datum['IMDB Rating'] == 14400 ", "value": "red"},
        {"test": "datum['IMDB Rating']  >14400 ", "value": "blue"}
      ],
      "value": "white"
    }
  }
}

vega lite图表轴标签问题

vega lite chart axis labels issue

charts

vega-lite

vega