0

I would like to configure the locale for a visualization in Vega. I need a German number format, which means that I need a comma (,) as decimal separator. Without any configuration in Vega, a decimal point (.) is used as separator.

Here is a complete working example which shows a simple bar chart. As you can see in the image below, I want to format the numbers on the y-Axis and the values inside the bars with two decimal places.

How can I set a specific locale (e.g. German) either globally for the whole visualization or for each number format separately? (I would prefer a global setting.)

(Note: You can use the Vega Editor to paste and try out my bar chart example.)

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

Simple bar chart with Vega

4

1 回答 1

1

I found a pull request in the Vega GitHub repository which allows to set the number and time locale. Also runtime changes are supported.

Example for changing the number format to German:

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

Example for changing the time format to German:

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"]
});
于 2017-02-08T13:51:23.567 回答