Я пытаюсь создать линейную диаграмму в 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 на «ГГГГ-ММ-ДДТЧЧ: мм: сс.СССССС», чтобы он соответствовал моему формату метки времени.





Этот код работает совершенно нормально.
единица: Временной интервал
парсер: формат ввода
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;
Кажется, вы не установили формат вывода для меток времени; для этого используйте time.unit и time.displayFormats.