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，它允许设置数字和时间区域设置。还支持运行时更改。

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

#ifdef __OBJC__

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

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

如何在Vega中设置区域设置（全局）

1 个答案: