如何在 Vega 中设置语言环境（全局）

Question

我想为 Vega 中的可视化配置语言环境。我需要一个德语数字格式，这意味着我需要一个逗号 (,) 作为小数点分隔符。 Vega 中没有任何配置，使用小数点（.）作为分隔符。

这是一个完整的工作示例，它显示了一个简单的条形图。正如您在下图中看到的，我想格式化 y 轴上的数字和带有两位小数的条形内的值。

如何为整个可视化全局或分别为每种数字格式设置特定的语言环境（例如德语）？（我更喜欢全局设置。）

（注意：您可以使用 Vega Editor 粘贴并试用我的条形图示例。）

{
  "width": 600,
  "height": 300,
  "padding": {"top": 10, "left": 35, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 1, "y": 0.5},
        {"x": 2, "y": 0.8},
        {"x": 3, "y": 0.3},
        {"x": 4, "y": 0.6}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "width",
      "domain": {"data": "table", "field": "x"},
      "padding": 0.1
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table", "field": "y"}
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y", "format": ".2f"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "x"},
          "width": {"scale": "x", "band": true, "offset": -1},
          "y": {"scale": "y", "field": "y"},
          "y2": {"scale": "y", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        }
      }
    },
    {
      "type": "text",
      "from": {"mark": "bars"},
      "properties": {
        "enter": {
          "y": {"field": "y", "offset": 10},
          "x": {"field": "x"},
          "dx": {"field": "width", "mult": 0.6},
          "fill": {"value": "white"},
          "align": {"value": "right"},
          "baseline": {"value": "middle"},
          "text": {"template": "{{datum.datum.y | number:'.2f'}}"}
        }
      }
    }
  ]
}

Answer 1

我找到了一个 pull request in the Vega GitHub repository 可以设置号码和时间区域。还支持运行时更改。

将数字格式更改为德语的示例：

vg.util.format.numberLocale({
  decimal: ",",
  thousands: ".",
  grouping: [3],
  currency: ["", "\xa0€"]
});

将时间格式更改为德语的示例：

vg.util.format.timeLocale({
  dateTime: "%A, der %e. %B %Y, %X",
  date: "%d.%m.%Y",
  time: "%H:%M:%S",
  periods: ["AM", "PM"], // unused
  days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
  shortDays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
  months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
  shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
});

如何在 Vega 中设置语言环境（全局）

How to set locale (globally) in Vega

d3.js

locale

vega