Highcharts折线图配置：滚动绘图区固定显示最新10个数据点

针对你提出的两个核心需求，以下是具体的实现方案：

一、固定可视区域为最新10个数据点 #

要确保初始显示最新10个数据，且滚动时能查看其余数据，需手动控制图表宽度与容器滚动位置：

1. 计算单个数据点宽度：按容器宽度800px容纳10个点，每个点分配800/10 = 80px的宽度
2. 动态设置canvas总宽度：总宽度 = 数据点数量 × 单个点宽度
3. 初始滚动到容器最右侧：通过JS将容器的scrollLeft设置为滚动总宽度与容器可视宽度的差值，确保默认显示最新数据

二、强制显示所有X轴刻度 #

通过配置X轴刻度参数，禁止自动隐藏或跳过刻度：

• 设置ticks.autoSkip: false：关闭刻度自动跳过逻辑
• 设置ticks.maxRotation: 0与ticks.minRotation: 0：保持刻度横向显示，避免旋转导致的隐藏

完整实现代码 #

<div class="chart-container" style="width: 800px; overflow-x: auto;">
  <canvas id="myChart"></canvas>
</div>

<script>
// 可自定义数据点数量
const totalItemCount = 20;
// 生成模拟数据（x为标签，y为随机数值）
const data = Array.from({length: totalItemCount}, (_, index) => ({
  x: `数据${index + 1}`,
  y: Math.floor(Math.random() * 100)
}));

// 单个数据点宽度，确保10个点填满800px容器
const singlePointWidth = 800 / 10;
// 图表总宽度
const totalChartWidth = totalItemCount * singlePointWidth;

const ctx = document.getElementById('myChart').getContext('2d');
// 手动设置canvas宽度
ctx.canvas.width = totalChartWidth;

new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: '数据系列',
      data: data,
      borderColor: '#4BC0C0',
      tension: 0.1,
      fill: false
    }]
  },
  options: {
    // 关闭响应式，避免自动缩放破坏布局
    responsive: false,
    scales: {
      x: {
        ticks: {
          // 禁止自动跳过刻度
          autoSkip: false,
          // 刻度保持横向，不旋转
          maxRotation: 0,
          minRotation: 0
        },
        offset: true
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

// 初始滚动到容器最右侧，显示最新10个数据点
const container = document.querySelector('.chart-container');
container.scrollLeft = container.scrollWidth - container.clientWidth;
</script>

关键说明 #

• 关闭responsive: false是为了避免Chart.js自动调整canvas尺寸，确保我们手动设置的宽度生效
• 如果数据点数量极大导致刻度过于拥挤，可适当调整singlePointWidth增大单个点宽度，或修改ticks.maxRotation为45让刻度倾斜显示，但仍能保证所有刻度可见
• 初始滚动逻辑确保页面加载完成后直接定位到最新数据区域

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