在 Bootstrap Modal 中自动调整 Modal Content 的大小答案

【问题标题】：Auto Adjust Size of Modal Content in Bootstrap Modal在 Bootstrap Modal 中自动调整 Modal Content 的大小
【发布时间】：2017-12-29 14:36:17
【问题描述】：

我是 ASP.net MVC 和 Bootstrap 的新手。我使用 chart.js 中的这个图表作为参考。 https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/

我能够使用链接将模态内容放入模态。但是，在显示图形的模态弹出窗口时会发生异常行为。该图不会自动调整模态大小，直到我最小化浏览器并最大化。

第一次加载时，这是图片

在我最小化和最大化浏览器后，它又回到了通常的形式，因为它会自动调整模态大小

这是代码

_partialView.cshtml

      <div id="chartContainer" > </div>



<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<script type="text/javascript">

    //function doFunction() {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            animationEnabled: true,
            title: {
                text: "Simple Column Chart in ASP.NET MVC"
            },
            subtitles: [
                { text: "Try Resizing the Browser" }
            ],
            data: [
            {
                type: "column", //change type to bar, line, area, pie, etc
                dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55 },
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14 }
                ]
            }
            ]
        });
        chart.render();
    //};
</script>

【问题讨论】：

尝试将style="height:400;width:100%;" 添加到您的<div id="chartContainer"> 元素（或使用css 调整大小）
还是一样的输出。
嗨@StephenMuecke 我试着把这个样式=“height:400px;width:100%;”整个 div 调整但不是图表..
我建议排除您可能遇到的任何可能的 css 冲突。 docs 建议您的操作是正确的，它应该在初始渲染时填充容器，因此不确定问题是什么。
谢谢，我找到了解决此问题的方法，将作为答案发布

标签： asp.net asp.net-mvc bootstrap-modal bootstrap-4

【解决方案1】：

我找到了 Canvas Chart.js 解决此问题的方法。

基于这个类似的问题，作者或开发者已经解决了这个问题并给出了这个解决方案https://canvasjs.com/forums/topic/charts-arent-full-size-until-page-is-refreshed/

如果您希望在以后的工作中使用此插件，这可能会对您有所帮助。

只需在页面加载事件后几秒钟的延迟后添加这行代码，基本上就可以创建图表

var chart = null;
setTimeout(function(){

chart = [create chart here]
chart.render();

},3000);

所以会弹出模态框，图表会根据你输入的秒数有一点延迟显示

【讨论】：