- 締切済み
JS iframe要素の読込データでグラフ表示
JS iframe要素に読み込んだデータでグラフ表示したい JavaScript iframe要素にデータを書いたテキストファイルを読み込んで グラフを描くことができますか？ 例えば、ある同行会のイベント企画のデータ。 題目 希望アンケートの集計結果 (この場合のセパレーターは半角空白) 食べ歩き 20人 バーベキュー 15人 映画鑑賞 10人 卓球大会 5人 -------------- [html] <iframe src="sample.txt" width="400" height="100"></iframe> <div class="container"> <canvas id="canvas1"></canvas> </div> [仕様] ・ローカル環境であること ・ファイルリーダーは使わない ・JavaScriptのコードを用いて実現させること ・テキストファイルの先頭行がグラフタイトルで、それ以降がデータ ・グラフ化は、Chart.js などのプラグインを使用してもよい 以上から、 iframe要素に読み込んだデータでグラフ表示ができますか？ （※グラフは添付画像のように）
- retorofan
- お礼率86% (336/388)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AIエージェント あい（@OKWAVE-AI）
- ベストアンサー率89% (2715/3019)
あなたが問い合わせている内容についてお答えいたします。 JavaScriptを用いて、iframe要素に読み込んだデータからグラフを表示することは確かに可能です。ただし、iframe内の内容をJavaScriptから直接アクセスするためには、同一オリジンポリシー（Same-Origin Policy）の条件を満たす必要があります。ローカル環境であることが指定されているため、同一オリジンポリシーの制約には引っかからないと仮定します。その上で、ファイルリーダーを使わずに実現する方法を以下に示します。 この方法では、JavaScriptのfetch APIを使用し、Chart.jsを用いてグラフを描画します。 ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>グラフ表示</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <iframe id="iframe" src="sample.txt" width="400" height="100" style="display: none;"></iframe> <div class="container"> <canvas id="canvas1"></canvas> </div> <script> window.onload = function() { const iframe = document.getElementById('iframe'); // iframeの内容がロードされるのを待機 iframe.onload = function() { try { const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; const data = iframeDocument.body.innerText.trim(); const lines = data.split('\n'); const title = lines[0]; const labels = []; const values = []; for (let i = 1; i < lines.length; i++) { const line = lines[i].split(' '); labels.push(line[0]); values.push(parseInt(line[1], 10)); } const ctx = document.getElementById('canvas1').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: title, data: values, backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); } catch (error) { console.error('Error reading the iframe content:', error); } }; }; </script> </body> </html> ``` このコードを実行するには、以下の手順を行ってください： 1. `sample.txt`ファイルを用意し、以下の内容を記載します。 ``` 希望アンケートの集計結果 食べ歩き 20 バーベキュー 15 映画鑑賞 10 卓球大会 5 ``` 2. HTMLファイルをブラウザで開く。 これにより、iframeから読み込んだデータを元にChart.jsを用いてグラフを描画します。ぜひお試しください。 ------------------------------------------------ こちらの回答はAIエージェント「あい」による参考回答です。 有識者からの回答も是非お待ちしています。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
お礼
補足
コードを確認させていただきました。 ２点修正すべき箇所がありました。 1. const title = lines[0]; //これだと「題目」も表示されてしまう そこは const title = lines[0].split(/\s/)[1]; 2. window.onload = function() { } の箇所があるとデータが読み込まれない。 この部分を削除したら、iframeからデータが読み込まれてグラフ描画できました。