如何在div中并排放置两个Chart.js生成的canvas？垂直堆叠无法并列怎么办

解决方案 #

核心原因 #

当前问题主要来自两个方面：

1. 外层div设置的30%宽度过窄，两个图表容器的最小宽度超过了父容器总宽度，触发自动折行
2. 未给列指定明确的栅格占比，加上Chart.js默认渲染尺寸容易撑大容器，导致栅格排版失效

修改步骤 #

1. 调整外层父容器宽度，保证有足够空间容纳两个并排图表
2. 给内部列指定固定栅格占比（比如各占一半用col-6）
3. 配置Chart.js的响应式属性，避免canvas撑破容器

代码示例 #

修改后的HTML结构

<div style="width: 90%;" class="row">
    <div class="my-4 col-6">
        <canvas id="costChart"></canvas>
    </div>
    <div class="my-4 col-6">
        <canvas id="usersChart"></canvas>
    </div>
</div>

Chart.js初始化配置（两个图表都要添加对应配置）

const costChart = new Chart(document.getElementById('costChart'), {
  // 保留原有图表类型、数据相关配置
  options: {
    // 新增以下响应式配置
    responsive: true,
    maintainAspectRatio: true,
  }
})

// usersChart 初始化时添加同样的options配置即可

额外排查点 #

• 确认已经正确引入Bootstrap CSS文件，栅格系统依赖Bootstrap样式才能生效
• 如果仍出现折行，可给canvas添加全局样式canvas {max-width: 100%;}限制最大宽度

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