Question

我是新手使用chart.js，我正在尝试创建一个非常简单的圆环图。它正在发挥作用图表显示，但它在我的页面中无限增长。

HTML代码：

   <div class="row">
    <div class="col-xs-3 container container-activ">
        <div class="col-xs-12 container-title">
            <span>Actif</span>
        </div>
        <div class="col-xs-12 container-info">
            <span>4</span>
        </div>
    </div>
    <div class="col-xs-3 container container-prevBudget">
        <div class="col-xs-12 container-title">
            <span>Budget prévisionnel</span>
        </div>
        <div class="col-xs-12 container-info">
            <span>180K €</span>
        </div>
    </div>
    <div class="col-xs-3 container container-allocBudget">
        <div class="col-xs-12 container-title">
            <span>Budget Alloué</span>
        </div>
        <div class="col-xs-12 container-info">
            <canvas id="myChart" width="45" height="45"></canvas>

            <span>32%</span>
        </div>
    </div>
    <div class="col-xs-3 container container-archived">
        <div class="col-xs-12 container-title">
            <span>Archivé</span>
        </div>
        <div class="col-xs-12 container-info">
            <span>4</span>
        </div>
    </div>

</div>

JS代码：

    $(document).ready(function () {
        jQuery.Cll = {};

        // Initialize Page Beadcrumb.
        jQuery.Cll.breadCrumb = new BreadCrumb([{ "@Resources.Index.BreadCrumbSegment1": "" }]);
        CLLHeader.onLoaded = function () {
            jQuery.Cll.breadCrumb.render();
        };

        $("#cllLeftMenu").cllLeftMenu({
            url:  @Html.Raw('"' + (String.IsNullOrEmpty(Model.Url) ? "" : Model.Url) + '"'),
            identifier:  @Html.Raw('"' + (String.IsNullOrEmpty(Model.Identifier) ? "" : Model.Identifier) + '"'),
            loadingTrsl: '@Shared.CurrentlyLoadingMsg'
        });

        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["1", "2"],
                datasets: [{
                    backgroundColor: [
                      "#2ecc71",
                      "#3498db",
                    ],
                    data: [12, 88]
                }]
            }
        });
    });

修改：我从HTML＆amp;添加更多代码JS和我正在使用bootstrap的信息

编辑2 ：我在此JsFidlle

中重现了我的问题

Answer 1

好的，我的问题来自css，图表显示在：table-cell。

感谢 @Deep

Chart.js圆环图越来越大

1 个答案: