使用 Chart.js 格式化日期轴和工具提示-js教程-PHP中文网

使用 Chart.js 格式化日期轴和工具提示

心靈之曲

发布： 2025-10-03 18:15:01

原创

319人浏览过

使用 chart.js 格式化日期轴和工具提示

本文旨在指导开发者在使用 Chart.js 创建图表时，如何自定义日期轴的显示格式以及工具提示中的日期格式。通过修改 Chart.js 的配置选项，可以灵活地控制日期在图表上的呈现方式，以满足不同的需求。本文将提供代码示例，帮助你快速实现日期格式的定制。

自定义 X 轴日期格式

在使用 Chart.js 绘制时间序列图时，经常需要自定义 X 轴的日期显示格式。例如，可能需要在 X 轴上仅显示年份，而在鼠标悬停在数据点上时，工具提示中显示完整的日期。

以下代码展示了如何使用 callback 函数来格式化 X 轴的刻度标签，仅显示年份：

const options = {
  scales: {
    x: {
      ticks: {
        display: true,
        callback: function(value, index, ticks) {
          const tickDate = new Date(chartData.labels[index]);
          return tickDate.getFullYear().toString();
        }
      }
    },
    y: {
      beginAtZero: true,
      ticks: {
        display: true,
      }
    }
  }
}

登录后复制

代码解释：

scales.x.ticks.callback：这是一个回调函数，Chart.js 会为每个 X 轴的刻度调用这个函数。
value：这个参数本应是刻度值，但有时可能未按预期填充。
index：刻度对应的索引。
ticks：刻度数组。
new Date(chartData.labels[index])：由于 value 参数可能未填充，我们使用 index 从原始数据 chartData.labels 中获取日期字符串，并创建一个 Date 对象。
tickDate.getFullYear().toString()：从 Date 对象中提取年份，并将其转换为字符串，作为刻度标签返回。

注意事项：

确保 chartData.labels 包含有效的日期字符串，new Date() 可以正确解析。
如果你的 value 参数能正确获取刻度值，那么可以使用 new Date(value) 来创建 Date 对象。

格式化工具提示日期

要格式化工具提示中的日期，可以使用 Chart.js 的 time 轴类型和 tooltipFormat 选项。

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

查看详情

const options = {
  scales: {
    x: {
      type: 'time',
      time: {
        unit: 'year',
        tooltipFormat: 'dd MMM yyyy'
      },
      ticks: {
        display: true,
      }
    },
  },
  plugins: {
    tooltip: {
      callbacks: {
        title: function(context) {
          const index = context[0].dataIndex;
          const label = chartData.labels[index];
          return label;
        },
      }
    }
  }
};

登录后复制

代码解释：

type: 'time'：指定 X 轴为时间轴。
time.unit: 'year'：指定 X 轴的主要时间单位为年。虽然这里设置为 'year'，但它主要影响的是坐标轴的显示和计算。
time.tooltipFormat: 'dd MMM yyyy'：指定工具提示中日期的格式。dd 表示日，MMM 表示月份的缩写，yyyy 表示年。Chart.js 使用 Moment.js 的格式化字符串。
plugins.tooltip.callbacks.title：允许你自定义工具提示的标题。在这里，我们使用原始日期标签 chartData.labels[index] 作为工具提示的标题，从而在工具提示中显示完整的日期。

注意事项：

确保引入了 chartjs-adapter-date-fns 或者其他 Chart.js 支持的时间适配器。
tooltipFormat 使用 Moment.js 的格式化字符串，请参考 Moment.js 的文档了解更多格式化选项。

完整示例

以下是一个完整的示例，展示了如何同时格式化 X 轴的刻度标签和工具提示中的日期：

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: {
        type: 'time',
        time: {
          unit: 'year',
          tooltipFormat: 'dd MMM yyyy'
        },
        ticks: {
          display: true,
          callback: function(value, index, ticks) {
            const tickDate = new Date(chartData.labels[index]);
            return tickDate.getFullYear().toString();
          }
        }
      },
      y: {
        beginAtZero: true,
        ticks: {
          display: true,
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          title: function(context) {
            const index = context[0].dataIndex;
            const label = chartData.labels[index];
            return label;
          },
        }
      }
    }
  }

  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

登录后复制

总结：

通过灵活使用 Chart.js 的配置选项，可以轻松地自定义日期轴的显示格式和工具提示中的日期格式。callback 函数可以用于格式化 X 轴的刻度标签，time 轴类型和 tooltipFormat 选项可以用于格式化工具提示中的日期。记住，根据你的具体需求选择合适的格式化方法，并参考 Chart.js 和 Moment.js 的文档，了解更多格式化选项。

以上就是使用 Chart.js 格式化日期轴和工具提示的详细内容，更多请关注php中文网其它相关文章！