Vega-lite 以 SI 单位显示文本值

Question

我的示例源代码如下

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28000}, {"a": "B", "b": 55000}, 
      {"a": "C", "b": 43000}, {"a": "D", "b": 91000}, 
      {"a": "E", "b": 81000}, {"a": "F", "b": 53000},
      {"a": "G", "b": 19000}, {"a": "H", "b": 87000}, 
      {"a": "I", "b": 52000}
    ]
  },
    "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  },
  "layer": [{
    "mark": "bar"
  },
  {
    "mark":{
       "type":"text",
       "align":"center",
       "baseline":"middle",
       "dx":0,
       "dy":-5
    } ,
    "encoding":{
       "text":{"field":"b","type":"quantitative"}
    }
  }
  ]
}

我希望文本标记以 SI 单位动态显示。所以在我的示例中，28k、55k、43k 等等。

我如何在 Vega-lite 中做到这一点？

Answer 1

按照以下或 editor:

在您的文本中添加格式化程序

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28000},
      {"a": "B", "b": 55000},
      {"a": "C", "b": 43000},
      {"a": "D", "b": 91000},
      {"a": "E", "b": 81000},
      {"a": "F", "b": 53000},
      {"a": "G", "b": 19000},
      {"a": "H", "b": 87000}
    ]
  },
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dx": 0,
        "dy": -5
      },
      "encoding": {
        "text": {"field": "b", "type": "quantitative", "format": ".2s"}
      }
    }
  ]
}

编辑

要在不同的值范围内提供不同的格式，您只需执行 calculate 转换并根据条件创建格式化值即可。然后，只需使用值字段作为您的 text，如下所示或参考 editor.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28000},
      {"a": "B", "b": 55000},
      {"a": "C", "b": 43000},
      {"a": "D", "b": 91000},
      {"a": "E", "b": 81000},
      {"a": "F", "b": 53000},
      {"a": "G", "b": 19000},
      {"a": "H", "b": 87000},
      {"a": "I", "b": 523399}
    ]
  },
  "transform": [
    {
      "calculate": "datum.b > 99999 ? format(datum.b,'.3s') : format(datum.b,'.2s')",
      "as": "textValue"
    }
  ],
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dx": 0,
        "dy": -5
      },
      "encoding": {"text": {"field": "textValue"}}
    }
  ]
}

您可以在 github

上参考 documentation to know more about number format or check the tests 文件

Vega-lite 以 SI 单位显示文本值

Vega-lite to show text values in SI units

vega-lite