图表未水平对齐

Question

我有下面的代码显示输出中的图表。我试图在一列中显示多个图表，这些图表应水平堆叠。

如果我将这段代码复制到body标签中的任何位置，它将显示垂直的图表堆栈。同样，其他三个图表遵循相同的代码，只是元素ID更改。图表应水平排列而不是垂直排列。怎么了？

我的代码：

          <div class="container">
            <div class="raw">
            <!-- Chart wrapper -->
            <div class="col-md-2">
            <canvas id="chart1"></canvas></div>
            <div class="col-md-2">
            <canvas id="chart2"></canvas></div>
            <div class=col-md-2>
            <canvas id="chart3"></canvas></div>
            <div class="col-md-2">
            <canvas id="chart4"></canvas></div>

          </div>
          </div>
        <script>
         var mylabel=["A","B"];
         var mydata = [10,20];
         var ctx = document.getElementById('chart1');

         var myChart = new Chart(ctx, {
         type: 'horizontalBar',
data: {
         labels: mylabel,
         datasets: [{
         label: '# of Votes',
         data: mydata,
         backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        barThickness: 10
        }]
         },
options: {
    scales: {
        xAxes: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        gridLines: {
            offsetGridLines: false
        }
    }]
    }
}

    });
      </script>