How to set locale to show time with my language?

╄→尐↘猪︶ㄣ 提交于 2021-02-10 17:51:59

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!