Блог

Главная - Вопросы по программированию - Пользовательское форматирование xticks в Ploty.js и Вью

Пользовательское форматирование xticks в Ploty.js и Вью

#javascript #vue.js #plotly #plotly.js

#javascript #vue.js #сюжетно #plotly.js

Вопрос:

Я пытаюсь применить пользовательское форматирование для xticks и yticks в Plotly.js диаграммах (используя оболочку Vue для этой библиотеки).

Я попытался использовать стандартное форматирование в стиле d3, но не смог применить формат, которого я пытаюсь достичь. Я использовал:

 xaxis: {
          tickformat: ",.2f",
        },

Таким образом, это 200000 отформатировано как 200,000.00 , но мой желаемый формат — иметь пробел в качестве разделителя тысяч, чтобы это 200000 стало 200 000.00 . Я не могу найти, как это работает в форматировании в стиле d3. Есть ли простой способ применить форматирование к значениям, отображаемым на графике?

Вот мой пример: https://codesandbox.io/s/vuetify-playground-barchart-pw78w?file=/src/layout.vue

Комментарии:

1. Вы читали это? github.com/d3/d3-format/blob/master/README.md#locale_format

2. Да, как я уже упоминал в вопросе, я не смог найти этот шаблон форматирования в d3.

3. Вы пытались изменить локаль в vue? Вероятно, что-то вроде en-ZA может сработать

4. @fdermishin Не уверен, как это будет работать с vue-сюжетом. библиотека

5. Потому что разделитель тысяч ' ' вместо ',' этого находится в этой локали. Смотрите en.wikipedia.org/wiki/Decimal_separator#Examples_of_use

Ответ №1:

Вам нужно только определить свой разделитель тысяч, как показано ниже:

 options: {
        responsive: true,
        locale: "en",
        locales: {
          en: {
            format: { thousands: " " },
          },
        },

Исправленный код
Ссылка