React Chart.js折线图Y轴展示时间格式数据问题

问题根源 #

Chart.js的数值轴仅支持数字类型数据，直接传入"10:55:41"这类字符串会被忽略，导致Y轴无数据展示。要兼顾图表渲染和时分秒显示，核心思路是：用秒数（数字）作为图表数据源，再通过Chart.js的刻度格式化器把秒数转回时分秒格式。

步骤1：实现时间转换工具函数 #

先写两个工具函数，分别处理「时分秒转总秒数」和「总秒数转时分秒」：

// 把时分秒字符串转成总秒数（支持超过24小时的小时数）
const parseTimeToSeconds = (timeStr) => {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  return hours * 3600 + minutes * 60 + seconds;
};

// 把总秒数转成时分秒格式（自动补零，例如5秒转为00:05）
const formatSecondsToTime = (totalSeconds) => {
  const hours = Math.floor(totalSeconds / 3600);
  const remainingSeconds = totalSeconds % 3600;
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;
  return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
};

步骤2：修改图表数据源生成函数 #

将totaltime转为秒数后传入图表数据：

function getChartData(documents, label, color) {
  return {
    labels: documents.map(doc => new Date(doc.date).getFullYear()), // 优化X轴显示，仅展示年份
    datasets: [
      {
        label: label,
        data: documents.map(doc => parseTimeToSeconds(doc.totaltime)),
        backgroundColor: color,
        borderColor: color,
        borderWidth: 1,
      },
    ],
  };
}

步骤3：配置Chart.js的刻度格式化 #

在图表选项中，对Y轴刻度和tooltip进行格式化，让用户看到时分秒：

import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

// 注册Chart.js所需组件
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

// 上述工具函数放在此处

const TimeLineChart = ({ documents }) => {
  const chartData = getChartData(documents, '年度总时长', 'rgba(75, 192, 192, 0.2)');
  
  const options = {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          // Y轴刻度格式化：秒数转时分秒
          callback: (value) => formatSecondsToTime(value)
        },
        title: {
          display: true,
          text: '总时长（时:分:秒）'
        }
      },
      x: {
        title: {
          display: true,
          text: '年份'
        }
      }
    },
    tooltip: {
      // 鼠标悬浮提示格式化
      callbacks: {
        label: (context) => `${context.dataset.label}: ${formatSecondsToTime(context.parsed.y)}`
      }
    }
  };

  return <Line data={chartData} options={options} />;
};

export default TimeLineChart;

关于date-fns无效的说明 #

date-fns的核心是处理具体日期时间对象，而非「时长秒数」。如果直接用它格式化秒数，会把秒数当成Unix时间戳（从1970年1月1日起的秒数），得到的是错误的日期，而非你需要的时分秒格式。因此针对时长格式化，自定义函数更直接可靠。

内容的提问来源于stack exchange，提问作者NeoFox