Q&A
回答ありがとうございます。
私は今回、Raspberry Piを使っているので、Linux 系を使用しています。
できることならURLを指定せずに行いたいのですが、回答していただいた方法以外はないのでしょうか？
前提・実現したいこと
AnyChartを使って波形表示のプログラム（HTML）を書いています。
調べていて、ネット上にあるCSVファイルを読み込んで棒グラフにするプログラムはあったのですが、私は正弦波のような波形をパソコンに保存されているCSVファイルを読み込んで描きたいと考えています。正弦波のような波形をで、かつ、CSVファイルを読み込むようなプログラムがわからないので、ぜひ教えていただきたいです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTMLのソースになります。
<html lang="en"> <head> <meta charset="utf-8" /> <style> html, body, #container { width: 100%; height: 100%; } </style> <title>AnyChart from CSV File/title> </head> <body> <div id="container"></div><script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-base.min.js" type="text/javascript"></script> <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-data-adapter.min.js"></script> <script> anychart.onDocumentReady(function () {
anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data) {
// create chart from loaded data
chart = anychart.bar(data);
// set title
chart.title("AnyChart from CSV File");
// draw chart
chart.container("container").draw();
});
});
</script>
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
標準化されてないFile APIを利用した形に書き換えてみました。
ダイアログで指定されたローカルファイルを読み込んで描画します。
HTML
1<html lang="ja"> 2<head> 3 <meta charset="utf-8" /> 4 <style> 5 html, 6 body, 7 #container { 8 width: 100%; 9 height: 100%; 10 } 11 </style> 12 <title>Real Chart</title> 13</head> 14<body> 15 <input type="file" name="file" id="file"> 16 <div id="container"></div> 17 <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> 18 <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-base.min.js" type="text/javascript"></script> 19 <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-data-adapter.min.js"></script> 20 <script> 21 const file = document.getElementById('file'); 22 if (window.File && window.FileReader && window.FileList && window.Blob) { 23 file.addEventListener('change', function (e) { 24 const reader = new FileReader(); 25 reader.onload = function () { 26 anychart.data.loadCsvFile(reader.result, function (data) { 27 chart = anychart.bar(data); 28 chart.title("AnyChart from CSV File"); 29 chart.container("container").draw(); 30 }); 31 } 32 reader.readAsDataURL(e.target.files[0]); 33 }, false); 34 } else { 35 file.style.display = 'none'; 36 result.innerHTML = 'File APIに対応したブラウザでご確認ください'; 37 } 38 </script> 39</body> 40</html>
投稿2019/11/28 12:40
総合スコア943
0
CSVファイルが保存されているパソコンが、質問に書かれているようなHTMLファイルを表示させているWebブラウザが稼働しているパソコンと同じものなら、そのパソコンでwebサーバを立てる(稼働させる)のが良いと思います。
Macやlinux系のOSを使っているパソコンならApacheというWebサーバのプログラムが最初から入っているでしょうし、WindowsのパソコンならIISというWebサーバのプログラムが最初から入っていますから、それらを稼働させるのは簡単です（ApacheやIISを稼働させる方法が書いてあるWebページも豊富にあります）
Webサーバのデータを置くディレクトリの下に、パソコンに保存しているCSVファイル(ファイル名を仮に"abc.csv"とします)のコピーを置いておけば、"https://localhost/abc.csv"というURLでアクセスできるようになります。
こうした準備をしておけば、
質問のHTMLにある
anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data) {
の部分を
anychart.data.loadCsvFile("https://localhost/abc.csv", function (data) {
に変えれば、
「ネット上にあるCSVファイルを読み込んで棒グラフにする」という動作が、
「自分のPC上にあるCSVファイルを読み込んで棒グラフにする」という動作に変わるはずです。
＝＝＝
投稿2019/11/28 08:32
総合スコア6915
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/29 04:55