半田づけなしで、ケーブルからAC電源取り出す方法
2019/05/12
原本
背景
目的
課題
事前検討
課題を解決する手段
所感
以上
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <SCRIPT LANGUAGE="JavaScript"> <!-- setTimeout("location.reload()",1000*5); // 5秒 //--> </SCRIPT> <title>グラフ</title> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <body> <h1>鶏頭図</h1> <canvas id="myPolarAreaChart"></canvas> <canvas id="myPolarAreaChart2"></canvas> <script> var ctx = document.getElementById("myPolarAreaChart"); var myPolarAreaChart = new Chart(ctx, { type: 'polarArea', data: { labels: ["1月", "2月", "3月", "4月","5月"], datasets: [{ backgroundColor: [ "#800080", //パープル "#FF1493", //ディープピンク "#FF0000", //レッド "#FF8C00", //ダークオレンジ "#FFD700" //ゴールド ], data: [18, 17, 12, 10, 3] }] }, options: { animation:false, // アニメーションの停止 title: { display: true, text: '月別 クラス病欠者数' } } }); </script> <script> var ctx2 = document.getElementById("myPolarAreaChart2"); var myPolarAreaChart2 = new Chart(ctx2, { type: 'polarArea', data: { labels: ["1月", "2月", "3月", "4月","5月"], datasets: [{ backgroundColor: [ "#800080", //パープル "#FF1493", //ディープピンク "#FF0000", //レッド "#FF8C00", //ダークオレンジ "#FFD700" //ゴールド ], data: [18, 17, 12, 10, 3] }] }, options: { animation:false, // アニメーションの停止 title: { display: true, text: '月別 クラス病欠者数' } } }); </script> </body> </html>
2枚のグラフを描くところがポイント
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グラフ</title> </head> <script type="text/javascript" src="moment.js"></script> <script type="text/javascript" src="Chart.js"></script> <script type="text/javascript" src="chartjs-plugin-streaming.js"></script> <body> <h1>折れ線グラフ</h1> <canvas id="myChart"></canvas> <canvas id="myChart2"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { datasets: [{ data: [], // 1つめ borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)", lineTension: 0, }, { data: [] // 2つめ }, { data: [] // 3つめ }, { data: [] // 4つめ }] }, options: { scales: { xAxes: [{ type: 'realtime', realtime: { duration: 30000, // 300000ミリ秒（5分）のデータを表示 (コメントアウトすると早く動く) onRefresh: function(chart) { chart.data.datasets.forEach(function(dataset) { dataset.data.push({ x: Date.now(), y: Math.random() }); }); } } }] } } }); </script> <script> var ctx2 = document.getElementById('myChart2').getContext('2d'); var chart2 = new Chart(ctx2, { type: 'line', data: { datasets: [{ data: [], // 1つめ borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)", lineTension: 0, }, { data: [] // 2つめ }, { data: [] // 3つめ }, { data: [] // 4つめ }] }, options: { scales: { xAxes: [{ type: 'realtime', realtime: { duration: 30000, // 300000ミリ秒（5分）のデータを表示 (コメントアウトすると早く動く) onRefresh: function(chart) { chart.data.datasets.forEach(function(dataset) { dataset.data.push({ x: Date.now(), y: Math.random() }); }); } } }] } } }); </script> </body> </html>
htmlでcsvファイルを読み込む
chromoの右上アイコン→その他のツール→ディベロッパーツール→Consoleに出力される
<form name="test"> <input type="file" id="selfile"><br> <textarea name="txt" rows="10" cols="50" readonly></textarea> </form> <script> var obj1 = document.getElementById("selfile"); //ダイアログでファイルが選択された時 obj1.addEventListener("change",function(evt){ var file = evt.target.files; //FileReaderの作成 var reader = new FileReader(); //テキスト形式で読み込む reader.readAsText(file[0]); //読込終了後の処理 reader.onload = function(ev){ //テキストエリアに表示する document.test.txt.value = reader.result; console.log( reader.result.split('\n') ); var lineArr = reader.result.split("\n"); //行と列の二次元配列にする var itemArr = []; for (var i = 0; i < lineArr.length; i++) { itemArr[i] = lineArr[i].split(","); } console.log( itemArr ); // chromoの右上アイコン→その他のツール→ディベロッパーツール→Consoleに出力される var dummy = Number(itemArr[1][2]); // 1行目2列目の数字を取り出す console.log(dummy); } },false); </script>
テストする為には、ローカルでサーバを立てなければならない。
python3 -m http.server → http://localhost:8000
python3 -m http.server 9876 → http://localhost:9876 # これがどうにも上手く動かない
http://kobore.net/soft/chart_test3/docs/ja/
http://kobore.net/soft/chart_test3/docs/samples/
ローカルディレクトリから"python3 -m http.server 9876"とすると、簡単にWebサーバが立ち上がり、google chromoで"http://localhost:9876"とすると、index.htmlの内容がでてきて便利であるが、
JavaScriptから"test.csv"を読み込んで、グラフに表示されたいのであるが、"test.csv"を更新しても、JavaScriptの内容に変化がないので、内容が変更されずに、心底困っていた。
そこで、test.csvのタイムスタンプが変更した時に、内容が変化すように、console.log(filetime('data.csv'))を加えてみたら、上手くいった。
正直、「助かった」と思った。
こんな感じ。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="mychart.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout("location.reload()",1000*5); // 5秒
//-->
</SCRIPT>
console.log(filetime('data.csv'))
<title>chart of results</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
<div style="width: 100%; height: 100%;">
<canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
</body>
</html>
ちなみに、開発中"だけ"に必要であれば、chromoのケースでは、 「その他のツール」→「ディベロッパーツール」→「Network」→disable cacheにチェックを入れると、キャッシュは無視される。