html - 响应式 Canvas 超越了 div

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 定位它。