如何在react-chartjs-2的X轴保持固定宽度刻度

问题描述 #

在react-chartjs-2中使用折线图，标签为Date类型，通过下拉菜单切换显示2小时、4小时、8小时的图表。需求是X轴刻度间距保持15分钟，但4小时和8小时的图表会出现挤压问题，希望通过固定刻度间距并让图表可横向滚动解决。

当前配置如下：

options = {
  scales: {
    x: {
      type: "time",
      time: {
        unit: "hour"
      }
    }
  }
}

但出现报错：Type 'string' is not assignable to type '"timeseries"'。已确认传入折线图data参数的labels是new Date(timestamp)数组。

解决方案 #

1. 修复X轴类型报错 #

Chart.js v3+版本中，时间轴的类型已从"time"改为"timeseries"，同时必须引入时间适配器库（如chartjs-adapter-date-fns或chartjs-adapter-moment），否则时间轴无法正常解析Date类型数据。

修改后的基础配置：

import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, TimeScale, LinearScale, PointElement, LineElement, Tooltip, Legend } from 'chart.js';
import 'chartjs-adapter-date-fns'; // 引入时间适配器

// 注册所需的图表组件
ChartJS.register(TimeScale, LinearScale, PointElement, LineElement, Tooltip, Legend);

const options = {
  scales: {
    x: {
      type: 'timeseries', // 替换原"time"类型为"timeseries"
      time: {
        unit: 'minute',
        stepSize: 15, // 强制设置15分钟的刻度间隔
        displayFormats: {
          minute: 'HH:mm', // 自定义刻度显示格式，按需调整
          hour: 'HH:mm'
        }
      },
      ticks: {
        autoSkip: false // 禁止自动跳过刻度，保证15分钟间隔的刻度全部显示
      }
    }
  }
};

2. 实现横向滚动解决挤压问题 #

通过给图表外层容器添加固定宽度和横向滚动样式，让长时间段的图表可以横向滚动：

/* 外层容器：提供滚动窗口 */
.chart-scroll-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px; /* 预留滚动条空间 */
}

/* 内层容器：根据刻度数量设置足够宽度 */
.chart-wrapper {
  /* 示例：每个15分钟刻度分配80px宽度，可根据需求调整 */
  width: calc(80px * ((selectedHours * 60) / 15));
}

在组件中使用容器包裹折线图：

<div className="chart-scroll-container">
  <div className="chart-wrapper">
    <Line data={chartData} options={options} />
  </div>
</div>

3. 动态计算容器宽度 #

根据下拉选择的时长（2/4/8小时）动态计算内层容器的宽度，确保每个刻度都有足够的显示空间：

// 根据选中时长计算图表所需宽度
const calculateChartWidth = (selectedHours) => {
  const tickCount = (selectedHours * 60) / 15; // 总刻度数：每15分钟一个刻度
  return `${tickCount * 80}px`; // 每个刻度分配80px宽度，可自定义
};

// 在组件中使用
const chartWrapperStyle = {
  width: calculateChartWidth(selectedHours)
};

// 渲染时应用样式
<div className="chart-scroll-container">
  <div className="chart-wrapper" style={chartWrapperStyle}>
    <Line data={chartData} options={options} />
  </div>
</div>

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