如何在坐标区和工具提示中设置 Chart.js 日期的格式

Question

我有以下使用chart.js 生成折线图的代码。 Y 轴代表价格值，而 X 轴代表日期值。 我希望 X 轴上的日期仅显示年份，但我仍然希望将鼠标悬停在数据点上时在工具提示中显示完整日期。

  const datesArray = ["1 May 2023", "2 May 2023", "3 May 2023", "4 May 2023", "5 May 2023"];
  const valuesArray = [107.71, 105.98, 106.12, 105.21, 106.215];

  const Chart = ({ width }) =>  (
    <ChartDiv style={{ width }} className='cursor-auto'>
      <PriceGraph 
         chartData={{ data: valuesArray, labels: datesArray }} 
         chartColour={'#218B82'} 
         chartFillColour={'#F2FFFF'} 
      />
    </ChartDiv>
  );

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-date-fns';
Chart.register(...registerables);

const PriceGraph = ({ chartData, chartColour, chartFillColour }) => {
  const options = {
    scales: {
      x: {
        ticks: {
          display: true,
          callback: (value, index, values) => {
            const tickDate = new Date(value);
            return tickDate.getFullYear().toString();
          }
        }
      },
      y: {
        beginAtZero: true,
        ticks: {
          display: true,
        }
      }
    }
  }

  const data = {
    labels: chartData.labels,
    datasets: [
      {
        data: chartData.data,
        backgroundColor: chartFillColour,
        borderColor: chartColour,
        fill: true,
      }
    ]
  }

  return <Line data={chartData.labels ? data : null} options={options}/>;  
}

export default PriceGraph

当我运行代码时，工具提示反映了正确的日期，但是 X 轴上的每个刻度显示“1970”。我预计这是我的回调函数中输入数据的问题或回调函数使用不当的问题。

查看 Chart.js 文档，有迹象表明我应该使用类型：时间，并应用格式。当我按如下方式修改代码时，我得到一个空白图表。

scales: {
      x: {
        type: 'time',
        time: {
          unit: 'year',
          tooltipFormat: 'dd MMM yyyy'
        },
        ticks: {
          display: true,
        }
      },

关于如何格式化 X 轴有什么建议吗？

Answer 1

由于某些原因，回调函数内的参数未按预期填充。理想情况下，第一个参数值应该是要打印的值。

解决此问题的方法是使用现有数据和回调参数中的索引。您可以尝试以下代码。

callback: function(value, index, ticks) {
  const tickDate = new Date(chartData.labels[index]);
  return tickDate.getFullYear().toString();
}

Answer 2

您可能需要检查该值是否以微秒为单位，即您可能需要将其乘以 1000。