How to set locale to show time with my language?

问题

I have standard timestamps in a time series, so I need X-axis showing time in my language (suppose pt not en) and standards of my country (suppose European or Brazilian but not US)... There are no example showing how to use it? Suppose the example bellow, how to add correct locale in it?

{
  "data": {
    "values": [
      {"a": "1995-10-11 09:00:00", "b": 28},
      {"a": "1995-10-12 09:00:00", "b": 30},
      {"a": "1995-10-13 15:00:00", "b": 34}
      {"a": "1995-12-17 03:00:00", "b": 29},
      {"a": "1995-12-17 09:00:00", "b": 31},
      {"a": "1995-12-17 15:00:00", "b": 30}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": { field": "a", "type": "temporal" },
    "y": {"field": "b", "type": "quantitative"}
  }
}

回答1:

You can set the timeFormatLocale embed option to one of the locale JSON objects from d3-format-locale.

Here is an example using the pt-BR locale setting:

<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.8.1"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    var spec = {
      "data": {
        "values": [
          {"a": "1995-10-11 09:00:00", "b": 28},
          {"a": "1995-10-12 09:00:00", "b": 30},
          {"a": "1995-10-13 15:00:00", "b": 34},
          {"a": "1995-12-17 03:00:00", "b": 29},
          {"a": "1995-12-17 09:00:00", "b": 31},
          {"a": "1995-12-17 15:00:00", "b": 30}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "temporal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    };
    var embedOpt = {
      "mode": "vega-lite",
      "timeFormatLocale": {
        "dateTime": "%A, %e de %B de %Y. %X",
        "date": "%d/%m/%Y",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
        "shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
        "months": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
        "shortMonths": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]
      }
    };
    vegaEmbed("#vis", spec, embedOpt);
  </script>
</body>
</html>

The rendered chart looks like this:

来源：https://stackoverflow.com/questions/61657984/how-to-set-locale-to-show-time-with-my-language

标签

vega-lite