Chart.js：グラフがiframeでサイズ変更されない

chart.jsを使用して複数の図表を同時に表示しようとしています。私のセットアップのために、私は図と（今のところ2）複数のiframeを作成split.htmlファイルを表示し、それらにchart.htmlをロードする1つのchart.htmlファイルを持っています。 chart.htmlを直接開くと、サイズ変更は機能しますが、iframeに読み込んだ場合は変更されません。サイジング自体は既に奇妙なので、私はchart.jsでエラーを想像することしかできませんでした。次の "上位"要素（divは100％幅と高さが固定されたdiv）上に配置され、キャンバスに直接幅や高さを設定しても変更されません。以下のコードを参照してください。Chart.js：グラフがiframeでサイズ変更されない

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：あなたのsplitter.jsをmodifiingとdiv要素に

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%; 
}

出典

2016-10-13 ThexBasic

iframeを使用する特別な理由は？ –

いいえ、何が良い方法でしょうか？ – ThexBasic

変更のiframe：

$(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'); 
} 
});

iframeの代わりにcontent要素に2つのdivを追加し、divにキャンバスを配置します。

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

のでチャートで隣同士に2つのdiv要素を揃えるためにあなたのCSSを変更

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

：キャンバス上のforeachし、それらをチャートとして動作させるために、あなたのdiagram.jsを変化よりもウィンドウのサイズを変更すると反応するように設定されているため、親要素の幅に基づいて自動的にサイズが変更されます（スクリプトからサイズ変更部分も削除できます）

出典

2016-10-14 07:35:28

Chart.js：グラフがiframeでサイズ変更されない

答えて

関連する問題