如何使用Chart.js将饼图排列在同一行

原代码的问题在于将两个图表分别放在独立的.row容器中，且错误使用了无效的position属性值，同时外层.col-md-6的宽度限制导致无法容纳并排元素。以下是修正后的代码：

<div class="container text-center">
  <div class="row">
    <!-- 第一个饼图容器 -->
    <div class="col-md-6">
      <div class="chart-container" style="height:40vh; width:100%">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <!-- 第二个饼图容器 -->
    <div class="col-md-6">
      <div class="chart-container" style="height:40vh; width:100%">
        <canvas id="myChart1"></canvas>
      </div>
    </div>
  </div>
</div>

关键调整说明：

• 将两个图表容器放入**同一个.row**中，借助Bootstrap栅格系统实现同行布局
• 用.col-md-6为每个容器分配50%的宽度（中等屏幕及以上尺寸生效），保证两者能并排显示
• 移除无效的position: right/left样式，设置width:100%让容器自适应列宽度
• 保留.container和居中样式，维持整体布局的对齐效果

若需要自定义间距或宽度比例，可替换.col-md-6为其他栅格列类（如.col-md-5+.col-md-7），或添加自定义margin/padding样式调整。

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