csvファイルを最大10個まで一括でグラフ化するツールを紹介します。
1つのcsvファイルには最大16個までのグラフを一括でグラフ化できます。
このツールは無料で改変自由ですので、好きなように変更して自分なりのグラフ表示ツールを作ることも可能です。
グラフ化した外観状態
こんな感じで散布図のグラフ化ができます。
これはサンプルなので、4つのcsvファイルのみを読み込んでいます。
グラフ3までしか表示していませんが、実際には下の方に16個分のグラフが並んでいます。
このツールは、以下のようなcsvをグラフ化することができます。
A列はx座標、B列～Q列がY座標で、散布図を表示します。
1行目、2行目はコメントを記載する欄ですので、ここの数字は参照されません。
4行目から下の数値が参照されます。
行はcsvファイルに入力した分だけ、全て参照します。
ツールの導入方法
このツールはhtmlとjavascript(chart.js)で作ったものです。
知っている方は以下の説明がなくても使えると思いますので、自由にお使い下さい。
知らな方でも簡単に導入できますので、以下の流れ通りに実施して下さい。
それでは導入方法を説明します。
少し下にプログラムのコードがたくさん書いてあり、右上に以下のマークがあります。
HTMLの右側に←の付いたマークがあるので、ここをクリックして下さい。
クリックすると、以下のように『Copied!』と表示されて、このプログラムをコピーします。
次はこのコードの下まで進んでください。
コードが長くて面倒ですが・・・(笑)
<html>
<head>
<meta charset="UTF-8">
</head>
<input type="file" name="file" id="file" multiple>
<div id="result"></div>
<style type="text/css">
#graph_display {
width: 120px;
height: 30px;
background-color: rgb(236, 181, 181);
margin: 5px auto;
text-align: center;
line-height: 30px;
font-size: 18px;
font-weight: bold;
color: #fff;
user-select: none;
float: left;
}
#x_min_down,
#x_min_up,
#x_max_down,
#x_max_up {
width: 120px;
height: 30px;
background-color: rgb(181, 236, 184);
margin: 5px auto;
margin-right: 20px;
text-align: center;
line-height: 30px;
font-size: 10px;
font-weight: bold;
color: rgb(0, 0, 0);
user-select: none;
float: left;
}
#y_min_down,
#y_min_up,
#y_max_down,
#y_max_up {
width: 120px;
height: 30px;
background-color: rgb(230, 233, 55);
margin: 5px auto;
margin-right: 20px;
text-align: center;
line-height: 30px;
font-size: 10px;
font-weight: bold;
color: rgb(0, 0, 0);
user-select: none;
float: left;
}
#x_max,
#x_min,
#y_max,
#y_min,
#calculate {
width: 30px;
height: 30px;
background-color: rgb(255, 255, 255);
margin: 5px auto;
margin-right: 20px;
text-align: center;
line-height: 30px;
font-size: 10px;
font-weight: bold;
color: rgb(0, 0, 0);
user-select: none;
float: left;
}
#graph_No_comment {
width: 80px;
height: 30px;
background-color: rgb(255, 255, 255);
margin: 5px auto;
margin-right: 20px;
text-align: center;
line-height: 30px;
font-size: 10px;
font-weight: bold;
color: rgb(0, 0, 0);
user-select: none;
float: left;
}
#space1,
#space2,
#space3,
#space4,
#space5,
#space6,
#space7,
#space8 {
width: 520px;
clear: both;
}
</style>
<body>
<!-- ②Chart.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<div id="space5"></div>
<div id="graph_display">グラフ表示</div>
<div id="calculate"></div>
<div id="space1"></div>
<div id="x_min_down">x_min_down</div>
<div id="x_min_up">x_min_up</div>
<div id="x_min">0</div>
<div id="x_max_down">x_max_down</div>
<div id="x_max_up">x_max_up</div>
<div id="x_max">10</div>
<div id="space2"></div>
<div id="y_min_down">y_min_down</div>
<div id="y_min_up">y_min_up</div>
<div id="y_min">0%</div>
<div id="y_max_down">y_max_down</div>
<div id="y_max_up">y_max_up</div>
<div id="y_max">100%</div>
<div id="space3"></div>
<!-- グラフを表示 -->
<canvas id="chart0" width="1280" height="320"></canvas>
<canvas id="chart1" width="1280" height="320"></canvas>
<canvas id="chart2" width="1280" height="320"></canvas>
<canvas id="chart3" width="1280" height="320"></canvas>
<canvas id="chart4" width="1280" height="320"></canvas>
<canvas id="chart5" width="1280" height="320"></canvas>
<canvas id="chart6" width="1280" height="320"></canvas>
<canvas id="chart7" width="1280" height="320"></canvas>
<canvas id="chart8" width="1280" height="320"></canvas>
<canvas id="chart9" width="1280" height="320"></canvas>
<canvas id="chart10" width="1280" height="320"></canvas>
<canvas id="chart11" width="1280" height="320"></canvas>
<canvas id="chart12" width="1280" height="320"></canvas>
<canvas id="chart13" width="1280" height="320"></canvas>
<canvas id="chart14" width="1280" height="320"></canvas>
<canvas id="chart15" width="1280" height="320"></canvas>
</body>
<script>
var file = document.getElementById('file');
var result = document.getElementById('result');
let data_all = [];
let plot_data_all = [];
let plot_data_pre = [];
var data0 = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
var data5 = [];
var data6 = [];
var data7 = [];
var data8 = [];
var data9 = [];
let plotData_temp = [];
let graph_y_max = [];
let graph_y_min = [];
let graph_y_range = [];
let y_max_rate = 0; // y軸の表示レート
let y_min_rate = 0; // y軸の表示レート
let file_name0; // ファイル名代入用
let file_name1;
let file_name2;
let file_name3;
let file_name4;
let file_name5;
let file_name6;
let file_name7;
let file_name8;
let file_name9;
let display_fin = 0; // 一度表示したかどうかの判定
let x_max = 10; // X軸表示範囲
let x_min = 0;
const graph_display1 = document.getElementById('graph_display'); //ボタン初期設定
const x_min_down1 = document.getElementById('x_min_down'); //ボタン初期設定
const x_min_up1 = document.getElementById('x_min_up'); //ボタン初期設定
const x_min1 = document.getElementById('x_min'); //ボタン初期設定
const x_max_down1 = document.getElementById('x_max_down'); //ボタン初期設定
const x_max_up1 = document.getElementById('x_max_up'); //ボタン初期設定
const x_max1 = document.getElementById('x_max'); //ボタン初期設定
const y_min_down1 = document.getElementById('y_min_down'); //ボタン初期設定
const y_min_up1 = document.getElementById('y_min_up'); //ボタン初期設定
const y_min1 = document.getElementById('y_min'); //ボタン初期設定
const y_max_down1 = document.getElementById('y_max_down'); //ボタン初期設定
const y_max_up1 = document.getElementById('y_max_up'); //ボタン初期設定
const y_max1 = document.getElementById('y_max'); //ボタン初期設定
const calculate1 = document.getElementById('calculate'); //ボタン初期設定
// グラフ作成情報
let label_name = [];
let backgroundColor = [];
let borderColor = [];
let labelString = [];
let graph_data = [];
let options = [];
backgroundColor[0] = 'rgba(45, 9, 250, 0.45)';
backgroundColor[1] = 'rgba(19, 233, 48, 0.45)';
backgroundColor[2] = 'rgba(138, 168, 142, 0.45)';
backgroundColor[3] = 'rgba(250, 9, 29, 0.45)';
backgroundColor[4] = 'rgba(5, 5, 5, 0.45)';
backgroundColor[5] = 'rgba(234, 250, 9, 0.45)';
backgroundColor[6] = 'rgba(9, 234, 250, 0.45)';
backgroundColor[7] = 'rgba(250, 0, 187, 0.45)';
backgroundColor[8] = 'rgba(1, 87, 15, 0.45)';
backgroundColor[9] = 'rgba(255, 123, 0, 0.45)';
borderColor[0] = 'rgba(45, 9, 250, 0.5)';
borderColor[1] = 'rgba(19, 233, 48, 0.5)';
borderColor[2] = 'rgba(138, 168, 142, 0.5)';
borderColor[3] = 'rgba(250, 9, 29, 0.5)';
borderColor[4] = 'rgba(5, 5, 5, 0.5)';
borderColor[5] = 'rgba(234, 250, 9, 0.5)';
borderColor[6] = 'rgba(9, 234, 250, 0.5)';
borderColor[7] = 'rgba(250, 0, 187, 0.5)';
borderColor[8] = 'rgba(1, 87, 15, 0.5)';
borderColor[9] = 'rgba(255, 123, 0, 0.5)';
labelString[0] = 'グラフ1';
labelString[1] = 'グラフ2';
labelString[2] = 'グラフ3';
labelString[3] = 'グラフ4';
labelString[4] = 'グラフ5';
labelString[5] = 'グラフ6';
labelString[6] = 'グラフ7';
labelString[7] = 'グラフ8';
labelString[8] = 'グラフ9';
labelString[9] = 'グラフ10';
labelString[10] = 'グラフ11';
labelString[11] = 'グラフ12';
labelString[12] = 'グラフ13';
labelString[13] = 'グラフ14';
labelString[14] = 'グラフ15';
labelString[15] = 'グラフ16';
// ファイル数取得
var aaa;
var num;
var graph_data0;
var datasets = [];
// File APIに対応しているか確認
if (window.File && window.FileReader && window.FileList && window.Blob) {
function loadLocalCsv(e) {
// ファイル数取得
aaa = e.target.files;
num = aaa.length;
// ファイル数確認
if (num > 10) {
alert('ファイル選択は10個以下にしてください');
return;
}
// ***********************************************************************0
// ファイル情報を取得
var fileData0 = e.target.files[0]; // ***個目のファイルをfileDataに格納
file_name0 = fileData0.name;
// CSVファイル以外は処理を止める
if (!fileData0.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader0 = new FileReader();
// ファイル読み込みに成功したときの処理
reader0.onload = function () {
var cols0 = reader0.result.split('\n');
for (var i = 0; i < cols0.length; i++) {
data0[i] = cols0[i].split(',');
}
data_all[0] = data0; // 0グラフデータ
}
// ファイル読み込みを実行
reader0.readAsText(fileData0);
// **************************************************************
// ***********************************************************************1
if (num > 1) {
// ファイル情報を取得
var fileData1 = e.target.files[1]; // ***個目のファイルをfileDataに格納
file_name1 = fileData1.name;
// CSVファイル以外は処理を止める
if (!fileData1.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader1 = new FileReader();
// ファイル読み込みに成功したときの処理
reader1.onload = function () {
var cols1 = reader1.result.split('\n');
for (var i = 0; i < cols1.length; i++) {
data1[i] = cols1[i].split(',');
}
data_all[1] = data1; // 1グラフデータ
}
// ファイル読み込みを実行
reader1.readAsText(fileData1);
}
// **************************************************************
// ***********************************************************************2
if (num > 2) {
// ファイル情報を取得
var fileData2 = e.target.files[2]; // ***個目のファイルをfileDataに格納
file_name2 = fileData2.name;
// CSVファイル以外は処理を止める
if (!fileData2.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader2 = new FileReader();
// ファイル読み込みに成功したときの処理
reader2.onload = function () {
var cols2 = reader2.result.split('\n');
for (var i = 0; i < cols2.length; i++) {
data2[i] = cols2[i].split(',');
}
data_all[2] = data2; // 2グラフデータ
}
// ファイル読み込みを実行
reader2.readAsText(fileData2);
}
// **************************************************************
// ***********************************************************************3
if (num > 3) {
// ファイル情報を取得
var fileData3 = e.target.files[3]; // ***個目のファイルをfileDataに格納
file_name3 = fileData3.name;
// CSVファイル以外は処理を止める
if (!fileData3.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader3 = new FileReader();
// ファイル読み込みに成功したときの処理
reader3.onload = function () {
var cols3 = reader3.result.split('\n');
for (var i = 0; i < cols3.length; i++) {
data3[i] = cols3[i].split(',');
}
data_all[3] = data3; // 3グラフデータ
}
// ファイル読み込みを実行
reader3.readAsText(fileData3);
}
// **************************************************************
// ***********************************************************************4
if (num > 4) {
// ファイル情報を取得
var fileData4 = e.target.files[4]; // ***個目のファイルをfileDataに格納
file_name4 = fileData4.name;
// CSVファイル以外は処理を止める
if (!fileData4.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader4 = new FileReader();
// ファイル読み込みに成功したときの処理
reader4.onload = function () {
var cols4 = reader4.result.split('\n');
for (var i = 0; i < cols4.length; i++) {
data4[i] = cols4[i].split(',');
}
data_all[4] = data4; // 4グラフデータ
}
// ファイル読み込みを実行
reader4.readAsText(fileData4);
}
// **************************************************************
// ***********************************************************************5
if (num > 5) {
// ファイル情報を取得
var fileData5 = e.target.files[5]; // ***個目のファイルをfileDataに格納
file_name5 = fileData5.name;
// CSVファイル以外は処理を止める
if (!fileData5.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader5 = new FileReader();
// ファイル読み込みに成功したときの処理
reader5.onload = function () {
var cols5 = reader5.result.split('\n');
for (var i = 0; i < cols5.length; i++) {
data5[i] = cols5[i].split(',');
}
data_all[5] = data5; // 5グラフデータ
}
// ファイル読み込みを実行
reader5.readAsText(fileData5);
}
// **************************************************************
// ***********************************************************************6
if (num > 6) {
// ファイル情報を取得
var fileData6 = e.target.files[6]; // ***個目のファイルをfileDataに格納
file_name6 = fileData6.name;
// CSVファイル以外は処理を止める
if (!fileData6.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader6 = new FileReader();
// ファイル読み込みに成功したときの処理
reader6.onload = function () {
var cols6 = reader6.result.split('\n');
for (var i = 0; i < cols6.length; i++) {
data6[i] = cols6[i].split(',');
}
data_all[6] = data6; // 6グラフデータ
}
// ファイル読み込みを実行
reader6.readAsText(fileData6);
}
// **************************************************************
// ***********************************************************************7
if (num > 7) {
// ファイル情報を取得
var fileData7 = e.target.files[7]; // ***個目のファイルをfileDataに格納
file_name7 = fileData7.name;
// CSVファイル以外は処理を止める
if (!fileData7.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader7 = new FileReader();
// ファイル読み込みに成功したときの処理
reader7.onload = function () {
var cols7 = reader7.result.split('\n');
for (var i = 0; i < cols7.length; i++) {
data7[i] = cols7[i].split(',');
}
data_all[7] = data7; // 7グラフデータ
}
// ファイル読み込みを実行
reader7.readAsText(fileData7);
}
// **************************************************************
// ***********************************************************************8
if (num > 8) {
// ファイル情報を取得
var fileData8 = e.target.files[8]; // ***個目のファイルをfileDataに格納
file_name8 = fileData8.name;
// CSVファイル以外は処理を止める
if (!fileData8.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader8 = new FileReader();
// ファイル読み込みに成功したときの処理
reader8.onload = function () {
var cols8 = reader8.result.split('\n');
for (var i = 0; i < cols8.length; i++) {
data8[i] = cols8[i].split(',');
}
data_all[8] = data8; // 8グラフデータ
}
// ファイル読み込みを実行
reader8.readAsText(fileData8);
}
// **************************************************************
// ***********************************************************************9
if (num > 9) {
// ファイル情報を取得
var fileData9 = e.target.files[9]; // ***個目のファイルをfileDataに格納
file_name9 = fileData9.name;
// CSVファイル以外は処理を止める
if (!fileData9.name.match('.csv$')) {
alert('CSVファイルを選択してください');
return;
}
// FileReaderオブジェクトを使ってファイル読み込み
var reader9 = new FileReader();
// ファイル読み込みに成功したときの処理
reader9.onload = function () {
var cols9 = reader9.result.split('\n');
for (var i = 0; i < cols9.length; i++) {
data9[i] = cols9[i].split(',');
}
data_all[9] = data9; // 9グラフデータ
}
// ファイル読み込みを実行
reader9.readAsText(fileData9);
}
// **************************************************************
label_name[0] = file_name0;
label_name[1] = file_name1;
label_name[2] = file_name2;
label_name[3] = file_name3;
label_name[4] = file_name4;
label_name[5] = file_name5;
label_name[6] = file_name6;
label_name[7] = file_name7;
label_name[8] = file_name8;
label_name[9] = file_name9;
}
file.addEventListener('change', loadLocalCsv, false);
} else {
file.style.display = 'none';
result.innerHTML = 'File APIに対応したブラウザでご確認ください';
}
// グラフ表示ボタン
graph_display1.addEventListener('click', function () {
// 座標データを配列に格納
for (var k = 0; k < data_all.length; k++) { // グラフデータ数分繰り返し
for (var j = 1; j < 17; j++) {
for (var i = 3; i < data_all[k].length; i++) {
plotData_temp.push({ x: data_all[k][i][0], y: data_all[k][i][j] });
}
plot_data_pre[j - 1] = plotData_temp; // 0グラフ_0~15波形
plotData_temp = []; // データクリア
}
plot_data_all[k] = plot_data_pre; // 0グラフ座標データ
plot_data_pre = []; // データクリア
}
// y max min 初期値計算
if (display_fin == 0) {
// max計算
for (var j = 1; j < 17; j++) {
graph_y_max[j - 1] = data_all[0][3][j] * 1;
for (var k = 0; k < data_all.length; k++) { // グラフデータ数分繰り返し
for (var i = 3; i < data_all[k].length; i++) {
if (data_all[k][i][j] > graph_y_max[j - 1]) {
graph_y_max[j - 1] = data_all[k][i][j] * 1;
}
}
}
}
// min計算
for (var j = 1; j < 17; j++) {
graph_y_min[j - 1] = data_all[0][3][j] * 1;
for (var k = 0; k < data_all.length; k++) { // グラフデータ数分繰り返し
for (var i = 3; i < data_all[k].length; i++) {
if (data_all[k][i][j] < graph_y_min[j - 1]) {
graph_y_min[j - 1] = data_all[k][i][j] * 1;
}
}
}
}
// yレンジ計算
for (var j = 1; j < 17; j++) {
graph_y_range[j - 1] = graph_y_max[j - 1] - graph_y_min[j - 1];
}
}
// グラフ描画
for (var i = 0; i < 16; i++) {
for (var j = 0; j < num; j++) {
datasets.push({
label: label_name[j],
data: plot_data_all[j][i],
// マーカー 背景色
backgroundColor: backgroundColor[j],
// マーカー 枠線の色
borderColor: borderColor[j],
// マーカー 大きさ
pointRadius: 1,
borderWidth: 1,
fill: false,
showLine: true
});
}
graph_data0 = { datasets: datasets };
datasets = [];
// オプション
var options0 = {
// 自動サイズ変更をしない
responsive: false,
// タイトル
title: {
display: true,
fontSize: 14,
fontStyle: 'normal', // 太字にしない
padding: 20,
text: ''
},
// 凡例
legend: {
// 右上に配置
align: 'start',
position: 'right',
// 余白
labels: {
padding: 10,
fontSize: 10
}
},
// 軸
scales: {
// X 軸
xAxes: [{
// 軸ラベル
scaleLabel: {
display: true,
labelString: '時間[sec]',
},
// 軸線のスタイル
gridLines: {
color: '#f3f3f3',
zeroLineColor: '#ddd'
},
// 目盛り
ticks: {
fontColor: '#333',
max: x_max,
min: x_min,
stepSize: 0.5,
},
}],
// Y 軸
yAxes: [{
scaleLabel: {
display: true,
labelString: labelString[i],
},
gridLines: {
color: '#f3f3f3',
zeroLineColor: '#ddd'
},
ticks: {
fontColor: '#333',
max: graph_y_max[i] + graph_y_range[i] / 10 * y_max_rate,
min: graph_y_min[i] + graph_y_range[i] / 10 * y_min_rate,
stepsize: 25,
mirror: true
}
}]
}
};
graph_data[i] = graph_data0; // 配列に追加
options[i] = options0; // 配列に追加
}
// グラフ削除
if (display_fin == 1) {
chart0.destroy();
chart1.destroy();
chart2.destroy();
chart3.destroy();
chart4.destroy();
chart5.destroy();
chart6.destroy();
chart7.destroy();
chart8.destroy();
chart9.destroy();
chart10.destroy();
chart11.destroy();
chart12.destroy();
chart13.destroy();
chart14.destroy();
chart15.destroy();
}
// 散布図を描画***0
var ctx0 = document.getElementById('chart0').getContext('2d');
window.chart0 = new Chart(ctx0, {
type: 'scatter',
data: graph_data[0],
options: options[0],
});
// 散布図を描画***1
var ctx1 = document.getElementById('chart1').getContext('2d');
window.chart1 = new Chart(ctx1, {
type: 'scatter',
data: graph_data[1],
options: options[1],
});
// 散布図を描画***2
var ctx2 = document.getElementById('chart2').getContext('2d');
window.chart2 = new Chart(ctx2, {
type: 'scatter',
data: graph_data[2],
options: options[2],
});
// 散布図を描画***3
var ctx3 = document.getElementById('chart3').getContext('2d');
window.chart3 = new Chart(ctx3, {
type: 'scatter',
data: graph_data[3],
options: options[3],
});
// 散布図を描画***4
var ctx4 = document.getElementById('chart4').getContext('2d');
window.chart4 = new Chart(ctx4, {
type: 'scatter',
data: graph_data[4],
options: options[4],
});
// 散布図を描画***5
var ctx5 = document.getElementById('chart5').getContext('2d');
window.chart5 = new Chart(ctx5, {
type: 'scatter',
data: graph_data[5],
options: options[5],
});
// 散布図を描画***6
var ctx6 = document.getElementById('chart6').getContext('2d');
window.chart6 = new Chart(ctx6, {
type: 'scatter',
data: graph_data[6],
options: options[6],
});
// 散布図を描画***7
var ctx7 = document.getElementById('chart7').getContext('2d');
window.chart7 = new Chart(ctx7, {
type: 'scatter',
data: graph_data[7],
options: options[7],
});
// 散布図を描画***8
var ctx8 = document.getElementById('chart8').getContext('2d');
window.chart8 = new Chart(ctx8, {
type: 'scatter',
data: graph_data[8],
options: options[8],
});
// 散布図を描画***9
var ctx9 = document.getElementById('chart9').getContext('2d');
window.chart9 = new Chart(ctx9, {
type: 'scatter',
data: graph_data[9],
options: options[9],
});
// 散布図を描画***10
var ctx10 = document.getElementById('chart10').getContext('2d');
window.chart10 = new Chart(ctx10, {
type: 'scatter',
data: graph_data[10],
options: options[10],
});
// 散布図を描画***11
var ctx11 = document.getElementById('chart11').getContext('2d');
window.chart11 = new Chart(ctx11, {
type: 'scatter',
data: graph_data[11],
options: options[11],
});
// 散布図を描画***12
var ctx12 = document.getElementById('chart12').getContext('2d');
window.chart12 = new Chart(ctx12, {
type: 'scatter',
data: graph_data[12],
options: options[12],
});
// 散布図を描画***13
var ctx13 = document.getElementById('chart13').getContext('2d');
window.chart13 = new Chart(ctx13, {
type: 'scatter',
data: graph_data[13],
options: options[13],
});
// 散布図を描画***14
var ctx14 = document.getElementById('chart14').getContext('2d');
window.chart14 = new Chart(ctx14, {
type: 'scatter',
data: graph_data[14],
options: options[14],
});
// 散布図を描画***15
var ctx15 = document.getElementById('chart15').getContext('2d');
window.chart15 = new Chart(ctx15, {
type: 'scatter',
data: graph_data[15],
options: options[15],
});
display_fin = 1;
});
x_min_down1.addEventListener('click', function () { // x_min_downボタン
x_min = x_min - 10;
x_min1.textContent = x_min;
});
x_min_up1.addEventListener('click', function () { // x_min_upボタン
x_min = x_min + 10;
x_min1.textContent = x_min;
});
x_max_down1.addEventListener('click', function () { // x_max_downボタン
x_max = x_max - 10;
x_max1.textContent = x_max;
});
x_max_up1.addEventListener('click', function () { // x_max_upボタン
x_max = x_max + 10;
x_max1.textContent = x_max;
});
y_min_down1.addEventListener('click', function () { // y_min_downボタン
y_min_rate--;
y_min1.textContent = y_min_rate * 10 + "%";
});
y_min_up1.addEventListener('click', function () { // y_min_upボタン
y_min_rate++;
y_min1.textContent = y_min_rate * 10 + "%";
});
y_max_down1.addEventListener('click', function () { // y_max_downボタン
y_max_rate--;
y_max1.textContent = 100 + y_max_rate * 10 + "%";
});
y_max_up1.addEventListener('click', function () { // y_max_upボタン
y_max_rate++;
y_max1.textContent = 100 + y_max_rate * 10 + "%";
});
</script>
</html>次は、デスクトップ画面で右クリックをし、新規作成のテキストドキュメントを選択して下さい。
(デスクトップじゃなくても好きな場所でもよいです。)
テキストドキュメントが出てきました。
テキストドキュメントをダブルクリックで開いて、編集の貼り付けを選択して下さい。
貼り付けできない場合は、先ほどのコードのコピーをもう一度行ってから、貼り付けをして下さい。
テキストドキュメントにコードが貼り付けられますので、ファイルの上書き保存をして下さい。
先ほどのテキストドキュメントをクリックし、ファイル名を変更します。
index.html というファイル名に変更し、enterを押してください。
以下のコメントが出ますので、はいを選択して下さい。
ファイルのアイコンが変わりますので、ダブルクリックして開いてください。
以下の画面が現れます。
これで使用可能です。
このツールの使い方
csvファイルを一括でグラフ化するための、このツールの使い方や外観を紹介します。
まずは以下の画面から、『ファイル選択』をクリック。
ファイルを選んで『開く』をクリック。
csvファイルのみをグラフ化できます。
csv以外のファイルを開こうとした場合は、エラーメッセージが表示されます。
ファイルは最大10個まで一括でグラフ化できます。
10個より多く開こうとした場合は、エラーメッセージが表示されます。
グラフ表示、をクリックします。
グラフが表示されます。
グラフ上のプロットされている箇所にマウスのカーソルを合わせると、数値を表示します。
グラフ右側に読み込んだファイル名が表示されており、ここをクリックすると線が表示され、この線が表示されたグラフを消すことができます。
もう一度押すとグラフが表示されます。
x_min_downとx_min_upはX軸の最小値を選択するボタンです。
downを押すと数値が小さくなり、upを押すと数値が大きくなります。
x_max_downとx_max_upはX軸の最大値を選択するボタンです。
yはY軸の最小値・最大値を変更するボタンです。
このボタンで数値を変更し、グラフ表示を押すと、その範囲にグラフを再描画します。
X軸は16個のグラフ全て共通ですが、Y軸はそれぞれ異なります。
Y軸はそれぞれの要素の最大値まで表示するようになっているため、それぞれの割合で表示範囲を変更する仕様になっています。・・・なので％の表示にしています。
わかりづらいかもしれませんが、いろいろいじってみて下さい。
改変方法
今回の説明では簡単な変更のみ紹介します。
変更したい場合は、ファイルの拡張子をtxtに変更してメモ帳などで開いて修正し、再度htmlという拡張子に戻してください。
以下にグラフ1～グラフ16と書いてありますが、これはY軸の表示ラベルです。
この文字を変更すれば、好きな表示ラベルに変更できます。
740行目に時間[sec]と書いてありますが、これはX軸ラベルです。
この文字を変更すれば、好きな表示ラベルに変更できます。
943行目、947行目、951行目、955行目に10という数字があります。
X軸の最小値・最大値を変更する場合に10ずつ数字が変わりますが、この数字を変更すればその数字ずつ数字を変えることができるようになります。
このツールについて
このツールはjavascriptのライブラリであるchart.jsを用いて制作したものです。
chart.jsというライブラリを使うことにより、javscriptを少し学習しただけで、グラフが簡単に描けてしまいます。
簡単といっても結構わかりにくいですが・・・。
javascriptに限らずプログラミングスキルを習得すれば、様々なツールを作ることが可能になります。
初心者がプログラミングスキルを習得する方法など紹介していますので、以下のページを是非見てみて下さい。
コメント