使用带有Bootstrap轮播的Chart.js

Question

我正在尝试将twp图表添加到Bootstrap轮播中，但收效甚微。当我在.carousel-inner元素中有两个图表时，它们似乎是堆叠或者一个不加载。我在旋转木马元素之外并排测试了两个图表并且它们工作正常。我还测试了另一个旋转木马中的两个图表，它完美地工作，直到我添加两个图表。我一直想把这个问题拿出来好几个小时，有人请帮忙，谢谢。

<div id="hourComparison" class="carousel slide">

    <div class="carousel-inner">        
        <div class="item active">
            <div class="container">
                <div class="col-md-4 chart"><canvas id="oneHour" width="500" height="500"></canvas></div>
                <div class="col-md-8">Lorem ipsum Sunt Ut eu sed dolore incididunt irure culpa ea in adipisicing fugiat dolore tempor Ut dolor eu Ut adipisicing eu.</div>
            </div> <!-- End .container -->
        </div> <!-- End .item -->

        <div class="item">
            <div class="container">
                <div class="col-md-4 chart"><canvas id="twoHour" width="500" height="500"></canvas></div>
                <div class="col-md-8">Lorem ipsum Sunt Ut eu sed dolore incididunt irure culpa ea in adipisicing fugiat dolore tempor Ut dolor eu Ut adipisicing eu.</div>
            </div> <!-- End .container -->
        </div> <!-- End .item -->
    </div> <!-- End .carousel-inner -->

    </div> <!-- End #hourComparison -->

    var doughnutDataOne = [
    {
        value: 50,
        color:"#f47d31",
        highlight: "#f47d31",
        label: "5 Minutes"
    },
    {
        value: 100,
        color: "#82ccc8",
        highlight: "#82ccc8",
        label: "10 Minutes"
    },
    {
        value: 50,
        color: "#57bb89",
        highlight: "#57bb89",
        label: "5 Minutes"
    },
    {
        value: 50,
        color: "#facb43",
        highlight: "#facb43",
        label: "5 Minutes"
    },
    {
        value: 270,
        color: "#4c5365",
        highlight: "#4c5365",
        label: "35 Minutes"
    }

    ];

    var doughnutDataTwo = [
    {
        value: 50,
        color:"#f47d31",
        highlight: "#f47d31",
        label: "5 Minutes"
    },
    {
        value: 100,
        color: "#000",
        highlight: "#82ccc8",
        label: "10 Minutes"
    },
    {
        value: 50,
        color: "#57bb89",
        highlight: "#57bb89",
        label: "5 Minutes"
    },
    {
        value: 50,
        color: "#facb43",
        highlight: "#facb43",
        label: "5 Minutes"
    },
    {
        value: 270,
        color: "#4c5365",
        highlight: "#4c5365",
        label: "35 Minutes"
    }

    ];


    var ctx = document.getElementById("oneHour").getContext("2d");
    window.chartOne = new Chart(ctx).Doughnut(doughnutDataOne, {
    responsive: true
    });


   var ctx2 = document.getElementById("twoHour").getContext("2d");
    window.chartTwo = new Chart(ctx2).Doughnut(doughnutDataTwo, {
        responsive: true
    });