- csv ファイルを読み込んで Google Charts を表示
ここでは csvファイルを読み込んで Google Charts を表示する例を作ってみました。
＊引用データ元
- csvファイル名を指定して読み込み、読み込んだデータを chartデータとして整形します。
参考１
参考２
- chartデータを Google Chart として表示します。
参考サイト１
参考サイト２
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File 選択表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var ma = new Array(); var data = new Array(); var res = new Array();
// 1) ファイル(fname)を読み込む
function getValue(){ // onload 時実行
var fname = 'data/boueki.csv'; // 利用ファイル名を指定 --------------------
// データ出典 http://www.mlit.go.jp/hakusyo/mlit/h27/hakusho/h28/html/n1114000.html
// 2) 該当 csvファイルから chartデータに変換 getCsv( fname ) ----------------
ma = getCsv( fname ); // → function: getCsv( fname )
// 3) 該当データ(ma)をgoogle.chartsで表示 → drawVisualization() ------------
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
}; // end of getValue(idname) ------------------------------------------
// 2) 該当名(url)の csvファイルをchartデータとして整形
function getCsv(url){ //CSVファイルを文字列で取得。
var txt = new XMLHttpRequest();
txt.open('get', url, false);
txt.send();
// 改行ごとに配列化
var arr = txt.responseText.split('\n');
// 1次元配列を2次元配列に変換
res = [];
res[0] = arr[0].split(',');
for(var i = 1; i < arr.length; i++){
// 空白行が出てきた時点で終了
if(arr[i] == '') break;
// ","ごとに配列化
res[i] = arr[i].split(',');
for(var i2 = 1; i2 < res[i].length; i2++){
// 数字の場合は「' "」を削除 ･･･ 2列目以降に適用
if(res[i][i2].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
res[i][i2] = parseFloat(res[i][i2].replace(/'?"?/g, ""));
}
}
};
return res;
}; // end of getCsv(url) ---------------------------------------------
// 3) 該当データ(ma)を google.chartsで表示
function drawVisualization() {
data = google.visualization.arrayToDataTable( ma );
var options = {
title : '貿易額推移',
// 出典 http://www.mlit.go.jp/hakusyo/mlit/h27/hakusho/h28/html/n1114000.html
titleTextStyle : { color: '#333', fontSize: 20 },
vAxis: {title: '金額 [兆円]'},
hAxis: {title: ma[0][0] },
seriesType: 'bars', // 全体は棒グラフ(default='line')
legendTextStyle : { color: '#333', fontSize: 12 },
isStacked: true // 積み上げ棒グラフ
};
var chart = new google.visualization.ComboChart(document.getElementById('graph'));
chart.draw(data, options);
}; // end of drawVisualization() --------------------------------------
</script>
<style>
body { background:#efe; }
.waku1 { text-align:center; font-size:14px; width:1000px; height:500px; margin:0 auto; padding:0; background:#eef; }
.waku1 h3{ margin:3px; }
#graph { width:100%; height:99%; }
</style>
</head>
<body onload="getValue()">
<div class="waku1">
<h3>csv データを読み込みグラフ表示</h3>
<div id="graph">ここにグラフを表示</div>
</div>
</body>
</html>
( 7行目) Google Chartsを利用するため、Google Charts のライブラリを読み込みます
(11行目) 起動時実行する getValue() を定義します
(12行目) 利用するファイルの url を指定します
(15行目) getCsv() でデータファイル fname を chartデータ ma に変換します
(17行目) チャートを表示するため 'current'バージョンの corechartパッケージを呼び出します。
(18行目) JavaScript function (drawVisualization) のコールバックを実行します
(21行目-) CSVファイルを chartデータ用文字列で取得する functionを記述します
(22行目) XMLHttpRequest オブジェクトを作成します
(23行目) { 'get', url, 同期実行(false) } で open() 動作を設定します。
(24行目) 該リクエストを送信します。
(26行目) 文字列をまず１次元配列に分解します。
(29行目) 一列目を、２次元配列に分解します。
(34行目) 二列目以降を、２次元配列に分解します。
(38行目) 各行の２列目以降のデータを数値データにします。
(45行目-) チャートの詳細を指定する function (drawVisualization) を記述します。
(53行目) 棒グラフを表示するように指定します。
(55行目) 棒グラフを積み上げで表示するように指定します。
(57行目) ComboChartを id='graph' 領域に表示するように指定します。
(58行目) chart を表示します。
(68行目) onload 時 getValue() を実行します。
(71行目) グラフを表示エリア id='graph' を指定しました。
年度,中国,韓国,ASEAN 10ｹ国,米国,EU 27ｹ国
1995,12.4,4.6,11.7,18.4,11.2
1996,14.3,4.9,13.7,20.8,12.2
1997,16.1,4.9,14.5,23.3,13.4
1998,15.3,3.6,11.3,24.2,14.4
1999,15.0,4.4,11.4,22.2,13.3
2000,18.1,5.5,13.8,23.1,13.5
2001,18.5,5.2,13.2,22.4,13.2
2002,21.0,5.5,13.4,22.1,13.1
2003,24.2,6.1,13.9,20.2,14.0
2004,28.5,7.2,15.2,20.5,15.7
2005,31.8,7.8,16.4,21.9,16.1
2006,36.5,9.0,18.2,24.8,17.9
2007,40.2,9.6,20.5,25.2,20.1
2008,39.2,9.2,21.8,22.3,18.7
2009,29.9,6.5,14.8,14.2,12.3
2010,37.0,8.0,18.7,16.3,13.4
2011,37.0,8.4,19.8,15.9,14.0
2012,35.5,8.1,20.6,17.3,13.1
2013,40.5,9,22.3,19.7,14.6
2014,43.6,9.0,23.3,21.2,15.8
- 「Feeding CSV to Google Chart」
Feeding CSV to Google Chartには、jquery.csv.jsを利用する例があり、次の３つの要素から構成されます。 関連
- csvファイル(ifr.csv;データファイル)
表示対象の csvファイルは読込プログラムに合わせて構成されます。通常一行目に項目リスト(例: year,daily)、二行目以後に表示データ(例: 2008,26.541\n2009,24.748\n･････)を記述します。
- jsファイル(jquery.csv.min.js/jquery.min.js)
「Feeding CSV to Google Chart」では jquery.csv.min.js で表示対象の csvファイルをグラフ表示用の配列に変換します。また jquery を使うために jquery.min.js を必要とします。
- htmlファイル(グラフ表示ファイル)
グラフ表示用配列を Google Chart で表示します。サンプル
グラフの種別は「chartType:'*****'」で指定します。(例: chartType:'LineChart'･･･線グラフ(default), chartType:'BarChart'･･･横棒グラフ, chartType:'ComboChart'･･･複合グラフ････)
- csvファイルを chart.jsでグラフ化
chart.jsでグラフ化する例もあります。
- csvファイル(data.csv;データファイル)
表示対象の csvファイルは表示データ(例: January, -10.4, -5.5\nFeburary, -30.3, 1\n･････)のみで構成されます。
- jsファイル(mychart.js)
jsファイルは mychart.js 一つで構成されています。
これを読み込むと main() が起動します。main() では、
1) CSVファイルをロードし、
2) csv2Array() で２次元配列に変換し、
3) drawBarChart() で chart.js 用の dataset配列を用意し、
4) chart.jsでグラフを表示します。
- htmlファイル(グラフ表示ファイル)
htmlで mychart.js と Chart.js を使って、グラフ表示する canvas を指定します。サンプル
以下のように複合グラフを表示することも出来ます。 参考１ 参考２
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<style>
#wrap{ width:1000px; height:500px; margin:0 auto; }
canvas#myChart{ width: 100%; height:100%; background:#ffe; }
</style>
<script>
var title =[];
main();
function main() {
// 1) ajaxでCSVファイルをロード
var req = new XMLHttpRequest();
var filePath = 'worker.csv'; // 読込ファイル名
req.open("GET", filePath, true);
req.onload = function() {
// 2) CSVデータ変換の呼び出し
data = csv2Array(req.responseText);
// 3) chart.jsデータ準備、4) chart.js描画の呼び出し
drawBarChart(data);
}
req.send(null);
}; // main() end ---------------------
// 2) CSVから２次元配列に変換
function csv2Array(str) {
var csvData = [];
var lines = str.split("\n");
title = lines[0].split(","); // 一行目(i=0)から項目を読みとる
for (var i = 1; i < lines.length; ++i) { // 一行目(i=0: 項目行)は読み込まない
var cells = lines[i].split(",");
csvData.push(cells);
}; // alert(title);
return csvData;
}
function drawBarChart(data) {
// 3)chart.jsのdataset用の配列を用意
var tmpLabels = [], tmpData1 = [], tmpData2 = [], tmpData3 = [], tmpData4 = [], tmpData5 = [], tmpData6 = [], tmpData7 = [], tmpData8 = [], tmpData9 = [], tmpData10 = [], tmpData11 = [], tmpData12 = [], tmpData13 = [], tmpData14 = [], tmpData15 = [], tmpData16 = [], tmpData17 = [];
for (var row in data) { // 各行毎に読み込み
tmpLabels.push(data[row][0])
tmpData1.push(data[row][3])
tmpData2.push(data[row][4])
tmpData3.push(data[row][5])
tmpData4.push(data[row][6])
tmpData5.push(data[row][7])
tmpData6.push(data[row][8])
tmpData7.push(data[row][9])
tmpData8.push(data[row][10])
tmpData9.push(data[row][11])
tmpData10.push(data[row][12])
tmpData11.push(data[row][13])
tmpData12.push(data[row][14])
tmpData13.push(data[row][15])
tmpData14.push(data[row][16])
tmpData15.push(data[row][17])
tmpData16.push(data[row][18])
tmpData17.push(data[row][19])
}; // --------------
// 4)chart.jsで描画
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: tmpLabels, // 横軸ラベル
datasets: [
{ label:title[3], data: tmpData1, backgroundColor:"rgba(240,100,100,0.5)",stack:1 },
{ label:title[4], data: tmpData2, backgroundColor:"rgba(100,240,100,0.5)", stack:1 },
{ label:title[5], data: tmpData3, backgroundColor:"rgba(100,100,240,0.5)", stack:1 },
{ label:title[6], data: tmpData4, backgroundColor:"rgba(240,200,100,0.5)", stack:1 },
{ label:title[7], data: tmpData5, backgroundColor:"rgba(100,240,200,0.5)", stack:1 },
{ label:title[8], data: tmpData6, backgroundColor:"rgba(200,100,240,0.5)", stack:1 },
{ label:title[9], data: tmpData7, backgroundColor:"rgba(240,100,50,0.5)", stack:1 },
{ label:title[10], data: tmpData8, backgroundColor:"rgba(50,240,100,0.5)", stack:1 },
{ label:title[11], data: tmpData9, backgroundColor:"rgba(200,50,50,0.5)", stack:1 },
{ label:title[12], data: tmpData10, backgroundColor:"rgba(50,200,50,0.5)", stack:1 },
{ label:title[13], data: tmpData11, backgroundColor:"rgba(50,50,200,0.5)", stack:1 },
{ label:title[14], data: tmpData12, backgroundColor:"rgba(150,100,0,0.5)", stack:1 },
{ label:title[15], data: tmpData13, backgroundColor:"rgba(0,150,100,0.5)", stack:1 },
{
type: 'line', //折れ線グラフを適用
label:title[16],
borderColor: "rgba(55,55,250,0.6)",
lineTension: 0, // 直線
fill: false, //エリア塗りつぶしせず
data: tmpData14,
stack:false,
},
{ type:'line', fill:false, lineTension: 0, borderColor:"rgba(55,55,250,1)", label:title[17], data:tmpData15 },
{ type:'line', fill:false, lineTension: 0, borderColor:"rgba(250,55,55,0.6)", label:title[18], data:tmpData16 },
{ type:'line', fill:false, lineTension: 0, borderColor:"rgba(250,55,55,1)", label:title[19], data:tmpData17 }
]
},
options: {
title: {
display: true,
text: '就業者年代別構成',
padding:8,
fontSize: 20
},
scales: {
xAxes: [{
scaleLabel: { // 軸ラベル設定
display: true, // 表示設定
labelString: '年次', // ラベル
fontSize: 16 // フォントサイズ
},
categoryPercentage:0.6 // 棒幅
}],
yAxes: [{
scaleLabel: { //軸ラベル設定
display: true, //表示設定
labelString: '人数[万人]', //ラベル
fontSize: 16 //フォントサイズ
}
}]
}
}
});
}; // drawBarChart(data) end ---------------------
</script>
</head>
<body>
<div id="wrap">
<canvas id="myChart" >ここにチャート表示</canvas>
</div>
</body>
</html>
( 5行目) Chart.min.jsを利用するため、chart.jsをインクルードします
( 8行目) グラフを描画する canvas域を定義します
(16行目) サーバーと HTTP通信を行うため XMLHttpRequestオブジェクトを作ります
(18行目) open() メソッドで HTTPメソッド、アクセス先 URL、非同期実行を指定します
(21行目) responseTextで csv形式の文字列データを受取ったら、配列 dataに変換します
(23行目) 配列 dataのデータでチャートを描画します
(25行目) sendメソッドでリクエストを送信，引数は GETなので nullを渡す。
(29行目-) CSVから配列に変換します。
(32行目) １行目から項目を読みとる。
(33行目-) ２行目以降から dataの各行配列を取得します。
(40行目-) data配列からグラフを描画します。
(43行目-) 各行毎のデータを読み込みます。
(65行目-) <canvas>要素への参照を取得し、getContextメソッドを呼び出します。
(66行目-) チャートオブジェクトを作成し、type及びdataプロパティを記述してゆきます。
(67行目) 今回は棒グラフを利用します。
(68行目-) dataプロパティの詳細を記述します。
(69行目) 横軸ラベルに対応する配列を渡します。
(71行目-) 各項目の、ラベル、データ値、色、積み上げを指定しました。
(85行目) グラフの一部に折れ線グラフを指定するため、'line'を記述しました。
(93行目-) 折れ線グラフをさらに追加します。
(98行目-) optionsプロパティを記述します。
(99行目-) グラフタイトルを指定します。
(106行目-) x軸の書式等を記述します。
(114行目-) y軸の書式等を記述します。
(130行目) <canvas>要素を設置します。
年,人口/万人,総有業者,15～19歳,20～24,25～29,30～34,35～39,40～44,45～49,50～54,55～59,60～64,65～69,70～74,75歳以上,男人口,男有業数,女人口,女有業数
1956,6041.9,3980.2,396.5,595.5,549.1,475.5,393.1,395.9,350.2,282.4,223.9,154.4,155.6,...,...,2902.3,2426,3139.7,1554.2
1959,6432.2,4133,385,565.6,558.3,544.7,434,387.1,375.6,299.2,241.4,165.1,168.2,...,...,3096.5,2589,3335.7,1543.9
1962,6722.2,4285.5,388.7,649.8,576.4,558.7,484,377.3,357.8,315.5,234.7,176.2,101.2,65,...,3239.8,2688.1,3482.3,1597.4
1965,7258.4,4477.9,352.1,681,563.8,566.8,547.7,445.4,362.8,322.4,260.7,186.2,115,73.9,...,3505.1,2819.8,3753.3,1658.1
1968,7655.1,4900.6,389.5,693.6,598.4,595.9,604.8,539.6,401.9,353.2,289.4,204.1,135.4,64.2,30.7,3703.2,3025.3,3951.9,1875.4
1971,7941.9,5063,271.6,806.9,585,587,625.7,584.5,477.3,360.5,304.8,221.3,138.2,68.4,31.9,3844.9,3159.8,4097,1903.2
1974,8281.5,5134.1,189.5,674.8,666.1,636.1,616.7,622.2,552,403,297.5,235.3,141.2,67.5,32.1,3998,3251.2,4283.6,1882.8
1977,8612.6,5364.9,156.8,571.8,770.9,633.2,660.2,661.9,605.1,482.9,323.6,238.4,151.2,71.5,37.3,4176.3,3354.7,4436.3,2010.3
1979,8829.7,5473.7,134.6,539.4,670.5,722.3,716.9,658.1,633,537.2,359.7,228.6,158.2,75.5,39.7,4282.5,3401.7,4547.2,2072
1982,9126.4,5788.8,152.2,552.5,596.2,800.6,715.5,717.5,676.4,588.2,433,249,169.2,89.1,49.4,4425.6,3508.3,4700.8,2280.5
1987,9733.7,6050.2,162.1,596,582,601.6,857.1,747.7,709.5,639.4,507,311.6,171.9,100.6,63.7,4723.8,3637.2,5010,2413
1992,10293.8,6575.6,171.9,701.1,648.9,588,660.5,914.5,761.8,698.8,594.5,397.8,241.6,113.9,82.3,4999.9,3877.6,5293.9,2698
1997,10665.3,6700.3,134,680.7,746.3,621.4,619.5,685.9,911.9,723.1,634.1,423.2,274,149.2,97,5174.6,3950.8,5490.7,2749.5
2002,10917.45,6500.93,122.04,527.3,745.63,710.33,642.14,639.47,673.35,845.23,635.85,423.42,270.65,151.73,113.77,5282.63,3803.41,5634.82,2697.53
2007,11030.15,6597.75,105.74,485.23,634.82,734.49,749.31,680.72,653.05,659.98,790.28,490.11,302.18,172.72,139.11,5328.25,3817.48,5701.89,2780.27
2012,11081.51,6442.07,93.88,406.19,575.49,628.06,756.53,775.89,688.15,636.34,614.15,612.02,320.16,182.56,152.64,5341.32,3674.45,5740.19,2767.62
2017,11097.67,6621.3,104.36,424.36,537.86,593.82,656.19,806.09,809.46,692.08,613.8,525.27,451.14,224.86,182.01,5354.29,3707.41,5743.39,2913.89
- chart.jsで色々なグラフを作成
こちらのサイトには以下のような色々な具体例があります。
- csv ファイルを選択して Google Charts を表示
ここでは電力会社が公開する発電種別 csvファイルを読み込んで Google Charts で表示する例を作ってみました。次の様に構成されています。
- csvファイル名を選択して読み込みます
参考サイト
- 読み込んだデータを chartデータとして整形します
参考サイト
- chartデータを Google Chart として表示します
参考サイト１
参考サイト２
* 以下に具体的に表示します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File 選択→表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var ma = new Array(); var data = new Array(); var res = new Array();
// 1) ファイル名(idname)を選択する
function getValue(idname){
var obj = document.getElementById(idname);
var fname = obj.value;
// 2) 該当名の csvファイルをchartデータとして整形
ma = getCsv( fname );
// 3) 該当データ(ma)をgoogle.chartsで表示
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
}; // getValue(idname) -------------------------
// 2) 該当名(url)の csvファイルをchartデータとして抽出
function getCsv(url){ //CSVファイルを文字列で取得。
var txt = new XMLHttpRequest();
txt.open('get', url, false);
txt.send();
// 改行ごとに配列化
var arr = txt.responseText.split('\n');
// 1次元配列を2次元配列に変換
res = [];
for(var i = 0; i < arr.length; i++){
// 空白行が出てきた時点で終了
if(arr[i] == '') break;
// ","ごとに配列化
res[i] = arr[i].split(',');
for(var i2 = 1; i2 < res[i].length; i2++){
// 数字の場合は「"」を削除 ･･･ 2列目以降に適用
if(res[i][i2].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
res[i][i2] = parseFloat(res[i][i2].replace('"', ''));
}
}
}
return res;
}; // getCsv(url) ---------------------------
// 3) 該当データ(ma)をgoogle.chartsで表示
function drawVisualization() {
data = google.visualization.arrayToDataTable( ma );
var options = {
title : '供給電力推移',
titleTextStyle : { color: '#333', fontSize: 24 },
vAxis: {title: '電力 [MWh]'},
hAxis: {title: '日・時'},
seriesType: 'bars', // 全体は棒グラフ(default='line')
series: {0: { color: '#666',type: "line"},7:{visibleInLegend: false},9:{visibleInLegend: false}}, // 平均だけ折れ線グラフ, 7,9 非表示
legendTextStyle : { color: '#333', fontSize: 12 },
isStacked: true // 積み上げグラフ
};
var chart = new google.visualization.ComboChart(document.getElementById('graph'));
chart.draw(data, options);
}; // end of drawVisualization() -------------------
</script>
<style>
.waku1 { text-align:center; font-size:14px; width:1200px; height:500px; margin:0 auto; padding:0; background:#eee; }
#graph { width:100%; height:99%; }
</style>
</head>
<body>
<div class="waku1">
<h2>選択 csvデータをグラフ表示</h2>
<!-- 1) ファイル名(idname)を取得する -->
<select id="sel1">
<option value="data/kyuden_H30_623-25.csv">九電_H30_623-25</option>
<option value="data/shikoku201704F.csv">四国201704F</option>
<option value="data/kanden2018_4B.csv">関電2018_4B</option>
<option value="data/tepco-2018-624-30.csv">東電-2018-624-30</option>
<option value="data/hokud2018_6B.csv">北電2018_6B</option>
<option value="data/t-hoku20180801-10.csv">東北電20180801-10</option>
</select>
<input type="button" value="→作図" onclick="getValue('sel1');">
<!-- 3) グラフを表示 -->
<div id="graph">ここにグラフを表示</div>
</div>
</body>
</html>
( 7行目) Google Chartsを利用するため、Google Charts のライブラリを読み込みます
(11行目-) 1) ファイル名(idname)を選択し、2) 該当名の csvファイルをchartデータ用に整形し、3) google.chartsで表示します
(17行目) チャートを読み込むために'current'バージョンの corechartパッケージを呼び出します。
(18行目) JavaScript function (drawVisualization) のコールバックを登録します
(21行目) CSVファイルを chartデータ用文字列で取得する functionを記述します
(26行目) 文字列をまず１次元配列に分解します。
(33行目) さらに、２次元配列に分解します。
(37行目) 各行の２列以降のデータを数値データにします。
(44行目) チャートの詳細を指定する JavaScript function (drawVisualization) を記述します。
(52行目) 数値である最初の列データを線グラフで表示し、８(=7+1)番目及び10(=9+1)番目の列を非表示に指定しました。
(54行目) 棒グラフを積み上げで表示するように指定しました。
(56行目) ComboChartを id='graph' 領域に表示するように指定しました。
(70行目) ファイル選択ウインドを用意しました。
(80行目) グラフを表示エリア id='graph' を用意しました。
DATE_TIME,エリア需要,原子力,火力,水力,地熱,バイオマス,太陽光,太陽光抑制量,風力,風力抑制量,揚水,連系線
2018/6/23 0:00,8245,2585,5870,1277,95,27,0,0,105,0,70,-1784
2018/6/23 1:00,7951,2585,5675,1245,95,27,0,0,102,0,0,-1778
2018/6/23 2:00,8027,2585,5914,1239,95,27,0,0,81,0,-54,-1860
2018/6/23 3:00,8381,2585,6195,1286,95,27,0,0,77,0,-26,-1858
2018/6/23 4:00,8699,2578,6466,1305,95,27,0,0,90,0,0,-1862
2018/6/23 5:00,8609,2581,6396,1292,95,27,10,0,82,0,-104,-1770
2018/6/23 6:00,8306,2582,6302,1251,95,27,158,0,73,0,-458,-1724
2018/6/23 7:00,8448,2586,6414,1261,95,27,281,0,69,0,-559,-1726
2018/6/23 8:00,9037,2586,6552,1255,95,27,331,0,77,0,-52,-1834
2018/6/23 9:00,9542,2583,7013,1298,95,27,382,0,68,0,0,-1924
2018/6/23 10:00,9482,2584,6465,1273,95,27,1115,0,45,0,-86,-2036
2018/6/23 11:00,9519,2583,6283,1317,95,27,1416,0,29,0,-195,-2036
2018/6/23 12:00,9293,2583,6263,1273,100,27,1474,0,13,0,-396,-2044
2018/6/23 13:00,9430,2582,6321,1330,100,27,1459,0,23,0,-384,-2028
2018/6/23 14:00,9398,2580,6422,1300,100,27,1017,0,34,0,-58,-2024
2018/6/23 15:00,9241,2582,6562,1299,100,27,688,0,25,0,0,-2042
2018/6/23 16:00,9226,2581,6695,1310,95,27,561,0,15,0,0,-2058
2018/6/23 17:00,9416,2577,7007,1311,95,27,312,0,20,0,147,-2080
2018/6/23 18:00,9484,2575,6728,1352,95,27,90,0,32,0,743,-2158
2018/6/23 19:00,9526,2579,6307,1466,95,27,11,0,41,0,1186,-2186
2018/6/23 20:00,9227,2581,6170,1317,95,27,0,0,24,0,1175,-2162
････････････････････････････････････････････････････････････････
- 参考サイト
|