Chart.js：图表未在 iframe 中调整大小答案

【问题标题】：Chart.js: Chart not resizing in iframeChart.js：图表未在 iframe 中调整大小
【发布时间】：2017-02-22 10:48:12
【问题描述】：

我正在尝试使用 chart.js 同时显示多个图表/图表。对于我的设置，我有一个显示图表的 chart.html 文件和一个创建多个 iframe（目前为 2 个）并加载 的 split.html 文件chart.html 在其中。直接打开 chart.html 时，调整大小有效，但在 iframe 中加载时无效。我只能想象 chart.js 的错误，因为尺寸本身已经很奇怪。它指向下一个“更高”元素（在我的例子中，div 具有固定的 100% 宽度和高度）并且直接在画布上设置宽度或高度不会改变任何内容，请参见下面的代码。

chart.html：

<html>
<head>
    <script src="./node_modules/chart.js/dist/Chart.bundle.js"></script>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./js/diagram.js"></script>
</head>
<body>
    <div id="container" style="width:100%; height:100%;">
        <canvas id="diagram"></canvas>
    </div>
</body>

split.html：

<html>
<head>
    <link rel="stylesheet" href="./css/splitter.css" />
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./js/splitter.js"></script>
</head>
<body>
    <div id="content">
    </div>
</body>

diagram.js：

$(document).ready(function() {
var ctx = document.getElementById("diagram");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: /** excluded (unimportance) **/
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
// Resize chart
$(window).resize(function() {
    console.log("resize works!");
    if(myChart) myChart.update();
});
});

splitter.js：

$(document).ready(function () {
const splits = 2;
switch (splits) {
    case 2:
        $("#content").append(
            $('<iframe />')
                .attr("id", "frame1")
                .attr("src", "./chart.html")
                .addClass("width50 height100")
        );
        $("#content").append(
            $('<iframe />')
                .attr("id", "frame2")
                .attr("src", "./chart.html")
                .addClass("width50 height100 left50")
        );
        break;
}
});

splitter.css：

iframe {
position: fixed;
border: none;
margin: 0;
padding: 0;
}
.width100 {
width: 100%;
}
.height100 {
height: 100%;
}
.width50 {
width: 50%;
}
.height50 {
height: 50%;
}
.left50 {
left: 50%;
}
.top50 {
top: 50%;
}

【问题讨论】：

使用 iframe 有什么特殊原因吗？
不，但是更好的方法是什么？

标签： javascript html css iframe chart.js

【解决方案1】：

通过修改 splitter.js 将 iframe 更改为 div：

$(document).ready(function () {
const splits = 2;
for(var i = 0; i < splits;i++){
    var chartContainer = $('<div id="frame' + (i + 1) + '"></div>').appendTo("#content");
    var canvas = $('<canvas class="diagram">').appendTo(chartContainer);
    if(i === 0)
        chartContainer.addClass('width50 height100');
    else
        chartContainer.addClass('width50 height100 left50');
}
});

它将向内容元素添加两个 div 而不是 iframe，并将画布放入 div 中。比将您的 diagram.js 更改为在画布上进行 foreach 并使它们作为图表工作：

$('canvas.diagram').each(function(){
var ctx = $(this);
var myChart = new Chart(ctx, {
  //here comes the chart configuration...
});
});

更改您的 css 以将两个相邻的 div 对齐

.width50 {
width: 50%;
display: inline-block;
}

因此图表现在位于块元素内，并且由于它们被设置为在您调整窗口大小时响应，它们将根据其父元素的宽度自动调整大小（因此您也可以从脚本中删除调整大小的部分)

【讨论】：