ChartJS双X轴单Y轴图表无法缩小的解决方案咨询

问题背景 #

开发双X轴、单Y轴的ChartJS折线图时，尝试通过CSS设置canvas宽高，并在配置中开启responsive: true和maintainAspectRatio: false，但图表尺寸始终无法按预期缩小。

问题代码 #

JS代码 #

const data = {
    datasets: [{
        label: 'Races/Ethnicities',
        data: [20, 30, 30, 40, 50],
        backgroundColor: 'rgba(255, 26, 104, 0.2)',
        borderColor: 'rgba(255, 26, 104, 1)',
        tension: 0.4,
        yAxisID: 'y'     
    }, 
    {
        label: 'Ages',
        data: [10, 20, 30, 40, 50],
        backgroundColor: 'rgba(0, 26, 104, 0.2)',
        borderColor: 'rgba(0, 26, 104, 1)',
        tension: 0.4,
    }]
};

const config = {
  maintainAspectRatio: false,
  responsive: true,
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true,
        type: 'linear',
        position: 'left'
      },
      x1: {
        labels: ['White (Non-Hispanic)', 'Black (Non-Hispanic)', 'Hispanic (Black Or White)', 'Asian', 'Unknown'],
      },
      x2: {
        position: 'top',
        labels: ['Younger than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
      },
    }
  }
};

const myChart = new Chart(
  document.getElementById('chart'),
  config
);

const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;

HTML代码 #

<canvas id="chart"></canvas>

CSS代码 #

#chart {
    background: black;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 50px;
    width: 20px;
    height: 20px;
}

核心问题分析 #

1. 配置属性位置错误：responsive和maintainAspectRatio是ChartJS的选项属性，必须放在config.options对象内，而非与type、data同级，否则ChartJS无法读取这些配置。
2. 双X轴配置不完整：未为两个X轴指定type: 'category'，且数据集未关联对应的X轴ID，导致轴渲染异常，间接影响尺寸控制。
3. CSS padding干扰：给canvas直接添加20px padding，会挤压图表的可绘制区域，即使尺寸设置正确，视觉上也会显得更小或变形。

修正后的代码 #

修正后的JS代码 #

const data = {
    datasets: [{
        label: 'Races/Ethnicities',
        data: [20, 30, 30, 40, 50],
        backgroundColor: 'rgba(255, 26, 104, 0.2)',
        borderColor: 'rgba(255, 26, 104, 1)',
        tension: 0.4,
        yAxisID: 'y',
        xAxisID: 'x1' // 指定关联x1轴
    }, 
    {
        label: 'Ages',
        data: [10, 20, 30, 40, 50],
        backgroundColor: 'rgba(0, 26, 104, 0.2)',
        borderColor: 'rgba(0, 26, 104, 1)',
        tension: 0.4,
        xAxisID: 'x2' // 指定关联x2轴
    }]
};

const config = {
  type: 'line',
  data,
  options: {
    responsive: true, // 移到options内
    maintainAspectRatio: false, // 移到options内
    scales: {
      y: {
        beginAtZero: true,
        type: 'linear',
        position: 'left'
      },
      x1: {
        type: 'category', // 指定分类轴类型
        labels: ['White (Non-Hispanic)', 'Black (Non-Hispanic)', 'Hispanic (Black Or White)', 'Asian', 'Unknown'],
      },
      x2: {
        type: 'category', // 指定分类轴类型
        position: 'top',
        labels: ['Younger than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
      },
    }
  }
};

const myChart = new Chart(
  document.getElementById('chart'),
  config
);

const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;

修正后的CSS代码 #

/* 用容器包裹canvas，避免直接给canvas加padding */
.chart-container {
    background: black;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 50px;
    width: 50px; /* 设置容器宽高控制图表尺寸 */
    height: 50px;
}

#chart {
    width: 100% !important; /* canvas占满容器 */
    height: 100% !important;
}

修正后的HTML代码 #

<div class="chart-container">
    <canvas id="chart"></canvas>
</div>

说明 #

• 将responsive和maintainAspectRatio移至options后，ChartJS会正确响应容器尺寸变化。
• 给数据集指定xAxisID，确保每个系列对应正确的X轴，避免轴标签混乱。
• 使用容器包裹canvas，将padding、背景样式应用到容器上，canvas占满容器，既能保留样式又不影响图表尺寸控制。

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