Chart.js V2.7.2：无动画实现静态Y轴及水平滚动方案咨询

我刚好折腾过Chart.js v2.7.2的这个需求，给你分享一个完全静态、保留固定Y轴且支持水平滚动的靠谱方案，全程不需要任何动画：

核心思路 #

因为v2.7.2没有内置的横向滚动功能，我们用双容器+双Canvas的方式实现：一个固定容器放独立的Y轴，另一个可滚动容器放主图表（隐藏自身Y轴），让两个图表的Y轴对齐，滚动主容器时只有数据区域横向移动，Y轴保持不动。

步骤1：HTML结构 #

先搭好嵌套容器，左边放Y轴的Canvas，右边放主图表的Canvas：

<div class="chart-container">
  <!-- 固定的Y轴区域 -->
  <div class="fixed-y-axis">
    <canvas id="standaloneYAxis"></canvas>
  </div>
  <!-- 可横向滚动的主图表区域 -->
  <div class="scrollable-content">
    <canvas id="mainScrollableChart"></canvas>
  </div>
</div>

步骤2：CSS样式 #

确保Y轴固定宽度，主容器可横向滚动，两个Canvas高度完全一致：

.chart-container {
  display: flex;
  height: 320px; /* 整体高度，按需调整 */
  align-items: stretch;
}

.fixed-y-axis {
  width: 80px; /* 刚好容纳Y轴刻度，按需调整 */
  flex-shrink: 0; /* 禁止收缩，保持固定宽度 */
}

.scrollable-content {
  flex: 1;
  overflow-x: auto; /* 开启横向滚动 */
}

/* 给两个Canvas设置固定尺寸，确保对齐 */
#standaloneYAxis, #mainScrollableChart {
  height: 320px;
  width: 100%;
}

步骤3：初始化Y轴图表 #

单独渲染一个只有Y轴的空图表，用来做固定的静态Y轴：

const yAxisCtx = document.getElementById('standaloneYAxis').getContext('2d');
new Chart(yAxisCtx, {
  type: 'line', // 随便选一个类型，只要能渲染Y轴就行
  data: {
    labels: [],
    datasets: [{ data: [] }] // 空数据，只保留Y轴框架
  },
  options: {
    responsive: true,
    maintainAspectRatio: false, // 禁用宽高比，使用我们设置的尺寸
    animation: { duration: 0 }, // 完全禁用动画
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          max: 50 // 这里要和主图表的Y轴最大值保持一致，避免错位
        },
        gridLines: {
          display: false // 隐藏网格线，避免和主图表重复
        }
      }],
      xAxes: [{
        display: false // 隐藏X轴，只留Y轴
      }]
    },
    legend: { display: false },
    tooltips: { enabled: false }
  }
});

步骤4：初始化主滚动图表 #

主图表隐藏自身Y轴，设置足够宽的尺寸来容纳所有数据，开启横向滚动：

const mainCtx = document.getElementById('mainScrollableChart').getContext('2d');
const myChart = new Chart(mainCtx, {
  type: 'line', // 换成你需要的图表类型：bar、line等
  data: {
    labels: ['数据点1', '数据点2', '数据点3', ..., '数据点100'], // 大量标签
    datasets: [{
      label: '我的数据集',
      data: [12, 19, 3, 5, 2, 3, ..., 45], // 对应的数据数组
      borderColor: '#2196F3',
      backgroundColor: 'rgba(33, 150, 243, 0.1)',
      fill: true
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: { duration: 0 }, // 禁用所有动画，保证静态
    hover: { animationDuration: 0 },
    responsiveAnimationDuration: 0,
    scales: {
      yAxes: [{
        display: false // 隐藏主图表的Y轴，用左边固定的那个
      }],
      xAxes: [{
        ticks: {
          autoSkip: false, // 显示所有X轴标签，不自动跳过
          maxRotation: 0, // 标签不旋转，节省横向空间
          minRotation: 0
        }
      }]
    }
  }
});

关键注意事项 #

• Y轴刻度同步：一定要确保两个图表的Y轴max、min或ticks配置完全一致，否则会出现刻度错位的情况。如果数据是动态的，可以先计算出数据的最大值，再同步设置到两个图表的Y轴配置里。
• Canvas尺寸对齐：两个Canvas的高度必须严格相同，否则Y轴会上下错位。
• 数据量优化：如果数据量特别大（比如上千个数据点），直接渲染全部可能导致性能问题，这时候可以监听滚动容器的scroll事件，根据滚动位置计算可见区域，动态更新主图表的data和labels；但如果是静态需求且数据量不大，直接渲染全部更简单。

这个方案在v2.7.2上亲测有效，完全满足你“静态Y轴+水平滚动+无动画”的要求。

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