如何在HTML/CSS中创建带共享X轴标签的图表？

用Chart.js配合CSS布局就能实现你要的效果，核心是让图表X轴刻度和表格列通过网格布局严格对齐，同时统一标签格式，兼顾响应式。具体步骤如下：

1. 基础HTML结构 #

用一个容器包裹图表和表格，表格第一列留空对应图表的Y轴区域，其余列标题直接使用需求中的月份：

<div class="chart-table-container">
  <canvas id="lineChart"></canvas>
  <table class="chart-data-table">
    <thead>
      <tr>
        <th></th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sales</td>
        <td>$1200</td>
        <td>$1900</td>
        <td>$1700</td>
        <td>$2100</td>
        <td>$2500</td>
        <td>$2300</td>
      </tr>
      <tr>
        <td>Volume</td>
        <td>340</td>
        <td>450</td>
        <td>390</td>
        <td>520</td>
        <td>610</td>
        <td>570</td>
      </tr>
    </tbody>
  </table>
</div>

2. Chart.js核心配置 #

设置X轴刻度居中对齐，关闭底部padding让图表紧挨着表格，同时用双Y轴区分Sales和Volume的数值范围：

const ctx = document.getElementById('lineChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], // 和表格列标题完全一致
    datasets: [
      {
        label: 'Sales',
        data: [1200, 1900, 1700, 2100, 2500, 2300],
        borderColor: '#2196F3',
        backgroundColor: 'rgba(33, 150, 243, 0.1)',
        fill: true,
        tension: 0.3
      },
      {
        label: 'Volume',
        data: [340, 450, 390, 520, 610, 570],
        borderColor: '#4CAF50',
        backgroundColor: 'rgba(76, 175, 80, 0.1)',
        fill: true,
        tension: 0.3,
        yAxisID: 'y1' // 右侧Y轴对应Volume
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 60, // 对应表格第一列宽度
        right: 10,
        top: 10,
        bottom: 0 // 去掉底部padding，让图表和表格无缝衔接
      }
    },
    scales: {
      x: {
        ticks: {
          align: 'center',
          padding: 10
        },
        grid: {
          display: false // 隐藏X轴网格线，避免和表格线冲突
        }
      },
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Sales ($)'
        }
      },
      y1: {
        beginAtZero: true,
        position: 'right',
        title: {
          display: true,
          text: 'Volume'
        },
        grid: {
          drawOnChartArea: false
        }
      }
    }
  }
});

3. CSS实现严格对齐和响应式 #

用CSS Grid布局让图表和表格的列宽完全对应，同时适配不同屏幕：

.chart-table-container {
  display: grid;
  grid-template-columns: 60px repeat(6, 1fr); /* 第一列对应Y轴，6列对应月份 */
  width: 90%;
  margin: 20px auto;
}

#lineChart {
  grid-column: 1 / -1; /* 图表占满所有列 */
  height: 300px;
}

.chart-data-table {
  grid-column: 1 / -1;
  border-collapse: collapse;
  width: 100%;
}

.chart-data-table th, .chart-data-table td {
  border: 1px solid #eee;
  padding: 8px;
  text-align: center;
}

.chart-data-table th:first-child, .chart-data-table td:first-child {
  width: 60px; /* 和grid第一列宽度一致 */
  text-align: left;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .chart-table-container {
    grid-template-columns: 50px repeat(6, 1fr);
  }
  
  #lineChart {
    height: 250px;
  }
  
  .chart-data-table th:first-child, .chart-data-table td:first-child {
    width: 50px;
  }
  
  .chart-data-table th, .chart-data-table td {
    padding: 6px;
    font-size: 0.9em;
  }
}

关键问题解决 #

• X轴与表头对齐：通过CSS Grid的列宽匹配，加上Chart.js的X轴刻度居中设置，确保每个月份标签和表格列完全对齐；关闭图表底部padding，让图表和表格无缝衔接。
• 标签格式一致：图表的labels数组直接复用表格的列标题文本，避免重复编写导致不一致。
• 响应式设计：Chart.js的responsive: true确保图表自动缩放，配合CSS媒体查询调整列宽、字体和图表高度，在小屏幕下依然保持对齐效果。

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