Question

我正在使用ChartJS在div中放置一个响应式图表。我也在使用bootstrap，所以div类是以网格为中心的（例如md-9）。图表不断扩展到div之外。我正在考虑溢出：隐藏在div上但不想丢失显示的任何数据。这是我的开发网站的链接。任何帮助表示赞赏：

http://investingcalculator.azurewebsites.net

我目前的HTML代码：

        <div class="budgetcalcsection">
        <div class="row">

            <div class="col-sm-3 col-md-2">

                <div class="inputtext">
                    Current Balance
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="number" id="currentbalance" class="form-control" placeholder="0">
                    </div>
                </div>

                <div class="inputtext">
                    Interest Rate
                    <div class="input-group">
                        <span class="input-group-addon">%</span>
                        <input type="number" id="interestrate" class="form-control" placeholder="0">
                    </div>
                </div>

                <div class="inputtext">
                    Monthly Contributions
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="number" id="monthlycontribution" class="form-control" placeholder="0">
                    </div>
                </div>

                <div class="inputtext">
                    Years Contributing
                    <div class="input-group">
                        <span class="input-group-addon">+</span>
                        <input type="number" id="yearscontributing" class="form-control" placeholder="0">
                    </div>
                </div>

                <div class="">
                    <input class="btn btn-default" type="submit" id="calculate" value="Calculate">
                </div>

                <div class="">
                    <input class="btn btn-default" type="submit" id="reset" value="Reset">
                </div>

                <div class="inputtext">
                    Ending Balance
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="text" id="endingbalance" class="form-control" placeholder="0" readonly>
                    </div>
                </div>
            </div>

            <!-- Investing Chart -->

            <div class="col-sm-9 col-md-10">
                    <canvas id="canvas"></canvas>
            </div>

        </div>
    </div>

Answer 1

问题源于ChartJS没有考虑到元素上的显示框是边框的事实。它将图表的大小调整为div的整个宽度，而不考虑填充。

为了解决这个问题，只需在列中放入一个没有任何引导列类的div，并使用ChartJS将其作为目标。

响应式画布延伸到div之外

1 个答案: