Chart.js — ось X не отображает даты с метками времени в формате «ГГГГ-ММ-ДДТЧЧ: мм: сс.СССССС» (Reactchartjs-2)

Я пытаюсь создать линейную диаграмму в React, используяchartjs-2, для визуализации временных меток и соответствующих им измерений мощности. Мои временные метки имеют формат «ГГГГ-ММ-ДДТЧЧ: мм: сс.СССССС» (включая миллисекунды, но без информации о часовом поясе).

import React, { useEffect, useState } from 'react';
// ... other imports

const MeasurementChart: React.FC<{ measurements: Measurement[] }> = ({ measurements }) => {
  // ... other component logic

  const chartConfig = {
    type: 'line' as const,
    data: chartData,
    options: {
      scales: {
        x: {
          type: 'time' as const,
          time: {
            parser: 'YYYY-MM-DDTHH:mm:ss.SSSSSS', // Adjusted for timestamps
            tooltipFormat: 'MM/DD/YY', // Optional: desired date format
          },
          title: {
            display: true,
            text: 'Timestamp',
          },
        },
        // ... y-axis configuration
      },
    },
  };

  // ... rest of component

    return (
        <div>
            {chartData && <Line 
            data = {chartData} 
            options = {chartConfig.options}
            />}
        </div>
    )
};

export default MeasurementChart;

Проблема:

На оси X диаграммы отображается только временная часть (ЧЧ:мм:сс.СССССС) временных меток. Я хочу, чтобы он отображал и дату, и время.

Я установил формат синтаксического анализатора в параметрах оси X на «ГГГГ-ММ-ДДТЧЧ: мм: сс.СССССС», чтобы он соответствовал моему формату метки времени.

Кажется, вы не установили формат вывода для меток времени; для этого используйте time.unit и time.displayFormats.

kikon 10.06.2024 01:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Этот код работает совершенно нормально.

единица: Временной интервал

парсер: формат ввода

TooltipFormat: при наведении курсора на точку формат вывода

import React, { useEffect, useState } from 'react';
// ... other imports

const MeasurementChart: React.FC<{ measurements: Measurement[] }> = ({ measurements }) => {
  // ... other component logic

  const chartConfig = {
    type: 'line' as const, // Specify chart type as 'line'
    data: chartData,
    options: {
      scales: {
        x: {
          type: 'time' as const,
          time: {
            parser: 'YYYY-MM-DDTHH:mm:ss.SSSSSSZ', // Adjust parser to match ISO 8601 format
            tooltipFormat:'yyyy-MM-dd HH:mm:ss', // Adjust tooltip format
            unit: 'day' as TimeUnit,
            displayFormats:{
              day:'yyyy-MM-dd:hh:mm'
            }
          },
          title: {
            display: true,
            text: 'Timestamp',
          },
        },
        y: {
          title: {
            display: true,
            text: "power",
          },
        },
      },
    },
  };
  // ... rest of component

    return (
        <div>
            {chartData && <Line 
            data = {chartData} 
            options = {chartConfig.options}
            />}
        </div>
    )
};

export default MeasurementChart;

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