Question

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

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

首次加载时，这里是图像

在我最小化并最大化浏览器后，它恢复到通常的形式，因为它会自动调整模态大小

这里是代码

_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>

Answer 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);

因此弹出模态，根据您输入的秒数，图表会稍微延迟显示

自动调整Bootstrap模态中模态内容的大小

1 个答案: