1.
2.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dygraph sample02</title>
<script type="text/javascript" src="dygraph-combined-dev.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graphdiv"), // 表示ID名
"Date,温度1,温度2\n" + // データ項目
"2008-05-07,45,30\n" +
"2008-05-08,60,50\n" +
"2008-05-09,20,35\n" +
"2008-05-10,50,45\n" +
"2008-05-11,65,40\n", // 以上 CSV
{ // option 指定
legend: 'always', // 凡例常表示
title: 'サンプルグラフ',
xlabel: '月日',
ylabel: '温度 (℃)',
valueRange: [0,80] // yスケール指定
}
);
</script>
</body>
</html>
【 左記の例 】 下図クリックで起動
【参考サイト】
( 6行目) dygraph-combined-dev.js を読み込み「dygraph」を利用可能にします
(11行目) CSV データを Dygraph に取り込みます
(13-18行目) 読み込む CSV データです。
外部ファイルの場合はサーバー上に置きます
(20-24行目) タイトル等の表示
オプションを記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dygraph sample</title>
<script type="text/javascript" src="dygraph.min.js"></script>
<style>
body{ background:url(../img/p_bcg007.gif); }
section{ width:800px; margin:0 auto; text-align:center; }
section>div{ width:100%; border:1px solid gray; }
#graphdiv{ width:500px; height:360px; margin:0 auto; border:1px solid black; }
.dygraph{ border:1px solid black; margin:15px 10px; padding:2px; }
.dygraph-title {
text-align:center; font-size: 24px; text-shadow: gray 2px 2px 2px;
}
.dygraph-legend {
font-size: 13px; position: absolute; z-index: 10;
width: 100px; height: 60px; padding: 2px;
text-align:left; overflow: hidden;
background-color: rgba(240, 250, 250, 0.7);
border: 1px solid #888; border-radius: 6px;
}
.dygraph-legend-line {
display: inline-block; position: relative;
padding-left: 1.2em; bottom: .5ex; height: 10px;
border-bottom-width: 2px; border-bottom-style: solid;
}
.dygraph-xlabel { text-align:center; font-size: 13px; }
.dygraph-ylabel {
text-align:center; font-size: 13px;
transform: rotate(-90deg); margin-left: 30px;
}
</style>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graphdiv"),
[ // データ配列
[ new Date("2008/05/07"),45,30 ],
[ new Date("2008/05/08"),60,50 ],
[ new Date("2008/05/09"),20,35 ],
[ new Date("2008/05/10"),50,45 ],
[ new Date("2008/05/11"),65,40 ]
],
{
legend: 'always', labelsSeparateLines: true,
title: 'Array Data 利用',
labels: ['Date','温度1','温度2'],
xlabel: '月日',
ylabel: '温度(℃)',
valueRange: [0,90],
series: {
温度1: { strokeWidth: 0.5 },
温度2: { strokeWidth: 2.0 }
}
}
);
</script>
</body>
</html>
【 左記の例 】下図クリックで起動
【凡例記述等】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>File 読み込みテスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined-dev.js"></script>
<script>
function init(){
var file = document.querySelector('#getfile');
file.onchange = function (){
var fileList = file.files;
var reader = new FileReader();
reader.readAsText(fileList[0]); // onchange時に読込む
reader.onload = function() { //読込み後グラフ表示
ma= reader.result.split("\n"); mas2 = ma.length-2;
mc = ma[0].split(",");
alert(mas2+" 地点の "+mc[0]+"; "+mc[1]+","+mc[2]+" を読込ました");
g = new Dygraph( document.getElementById("graph"), reader.result,{
showRoller: false, valueRange: [0,100]
} );
};
};
};
</script>
</head>
<body onload="init();">
<input type="file" id="getfile" accept="text/*">
<div id="graph"></div>
</body>
</html>
【 左記の例 】下図クリックで起動
【参考サイト】