Преобразование числового значения временной метки в формат `МММ ГГГГ`

Я хочу знать, как преобразовать данные в метке времени в формат «МММ ГГГГ», чтобы отобразить ось X диаграммы.

Вот мой LineChart.vue

    <script>
    import { Line } from 'vue-chartjs'
    
    export default {
      extends: Line,
      data () {
        return {
          datacollection: {
            labels: [        <-- Timestamps
              1600934100.0,
              1602009600.0,
              1602747060.0,
              1603050158.390939,
              1603305573.992575
            ],
            datasets: [
              {
                label: 'Data One',
                backgroundColor: '#f87979',
                pointBackgroundColor: 'white',
                borderWidth: 1,
                pointBorderColor: '#249EBF',
                data: [
                  9.0,
                  9.5,
                  2.5,
                  11.52,
                  12.4
                ]
              }
            ]
          },
    
          options: {
            lineTension: 0,
            maintainAspectRatio: false,
            legend: {
              display: false
            },
            scales: {
              yAxes: [
                {
                  scaleLabel: {
                    display: false
                  },
                  ticks: {
                    beginAtZero: true,
                    // eslint-disable-next-line no-unused-vars
                    callback (value, index, values) {
                      return `${value }%`
                    }
                  }
                }
              ],
              xAxes: [
                {
                  gridLines: {
                    display: false
                  }
                }
              ]
            }
          }
        }
      },
      mounted () {
    
        this.renderChart(this.datacollection, this.options)
      }
    }
    </script>

Результат, который я получил с помощью этого кода:

Как видно из вывода, ось X не имеет формат «МММ ГГГГ».

В связи с этим у меня два вопроса:

  1. Как преобразовать метки (которые находятся в метке времени) в формат «МММ ГГГГ» и какие изменения я должен внести в свой код, чтобы добиться этого.

  2. Я хочу получать данные из API, а не передавать данные напрямую, поэтому какие изменения я должен внести в свой код?

Примечание. Мой API также содержит временные метки.

Вот как выглядит мой API:

     {  
        "date": [
            1600934100.0,
            1602009600.0,
            1602747060.0,
            1603050158.390939,
            1603305573.992575
        ],
    
        "challenge": [
            9.0,
            9.5,
            -2.5,
            11.52,
            12.4 
        ]
      }

Пожалуйста, помогите мне с этим, так как я не могу столкнуться с этим самостоятельно, и я сталкиваюсь с этим уже 2 недели.

Скромная просьба, если кто-нибудь знает ответ, пожалуйста, сообщите мне, изменив мой собственный код и отправив его обратно, потому что я новичок в Vuejs, поэтому обертывание точного компонента или любой логики становится проблемой.

Как создание даты из метки времени, так и ее форматирование в любом формате — это простые и решаемые проблемы с множеством существующих ответов. Вам нужно разбить вашу проблему на отдельные части; Vue или ChartsJS здесь неуместны. То же самое касается загрузки данных из API; даже если ChartJS не поддерживает данные API, вы можете просто загрузить данные, а затем передать их в chartjs.

user5734311 14.12.2020 13:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
110
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете преобразовать свои числовые значения в Date и преобразовать их в правильно отформатированную строку (Date.prototype.toLocaleString()):

const src =  [1600934100,1602009600,1602747060,1603050158.390939,1603305573.992575],
             
      dates = src.map(n => 
        new Date(n*1e3)
          .toLocaleString(
            'en-US', 
            {month: 'short', year: 'numeric'}
          ))
     
console.info(dates)
.as-console-wrapper{min-height:100%;}
Ответ принят как подходящий

У вас есть 2 пути решения вашей проблемы. Вы либо изменяете массив, поступающий от API, в нужный формат, либо делаете карту своего массива API на стороне внешнего интерфейса и форматируете каждую дату.

В моем примере я буду использовать luxon:

const result = [
                 1600934100.0,
                 1602009600.0,
                 1602747060.0,
                 1603050158.390939,
                 1603305573.992575
             ].map(date => DateTime.fromMillis(date * 1000).toFormat("MMM yyyy"));

Это в основном создаст новый массив следующим образом

 [ "Sep 2020", "Oct 2020", "Oct 2020", "Oct 2020", "Oct 2020" ]

Другие вопросы по теме