「javascript/成長曲線」の編集履歴（バックアップ）一覧に戻る

javascript/成長曲線 - (2015/09/07 (月) 16:05:29) のソース

#javascript(){{{{{
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(chartLoad);
	// 変数宣言
	var mtrxS;
	var mtrxG;
	var state;
	var options = {
			title: 'ステータス 成長曲線',
			hAxis: {format:'Lv ###'},
			chartArea: {width: '60%', height: '80%'},
			lineWidth: 1,
			pointSize: 0,
	};
	
	// ファイル読込
	function loadCSV(file){
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("GET", file, false);
		xmlHttp.send(null);
		return xmlHttp.responseText;
	}
	// テキストを二次元配列に収納
	function textMtrx(csvText){
		var mtrx = new Array();
		if(csvText.match(/\r/)) var	row = csvText.split("\r\n");
		else						row = csvText.split("\n");
		
		var rowNum = row.length;
		for(var i = 0; i < rowNum; i++){
			mtrx[i] = new Array();
		}
		for(i = 0; i < rowNum; i++){
			var col = row[i].split(",");
			var colNum = col.length;
			for(var j = 0; j < colNum; j++){
				mtrx[i][j] = col[j];
			}
		}
		return mtrx;
	}
	// 配列・グラフ準備
	function chartLoad(){
		// サーヴァントデータ
		// [No.][]	[][0]:rare	[][1]:成長type	[][2-3]:HP	[][4-5]:ATK	[][6]:name
		var csvText = loadCSV('http://www9.atwiki.jp/f_go/pub/csv/servantList.csv');
		mtrxS = textMtrx(csvText);
		
		// 成長曲線
		// [3(n-1)+0][]:早熟	[3(n-1)+1][]:平均	[3(n-1)+2][]:晩成	(n = rare)
		// [][0]:Lv1	[][1-]:Lv(5n)
		var csvText = loadCSV('http://www9.atwiki.jp/f_go/pub/csv/servantGrow.csv');
		mtrxG = textMtrx(csvText);
		
		// 二次元配列の作成
		state = new Array();
		for(var i = 0; i <= 19; i++){
			state[i] = new Array();
			if(i == 1)	{state[i][0] = 1;}
			else		{state[i][0] = 5 * (i - 1);}
		}
		// グループ名
		state[0] = ['Lv', 'ID1_HP', 'ID1_ATK'];
		
		var test = [
			['Lv', 'ID1_HP', 'ID1_ATK'],
			[1,0,0],
			[25,0,0],
			[50,0,0],
			[75,0,0],
			[100,15000,15000]
		];
		
		var data = google.visualization.arrayToDataTable(test);
		var chart = new	google.visualization.ScatterChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}
	// 計算
	function stateLoad(ID, num){
		var rare = mtrxS[ID][0];
		var type = mtrxS[ID][1];
		var minHP = mtrxS[ID][2];
		var growHP = mtrxS[ID][3] - minHP;
		var minATK = mtrxS[ID][4];
		var growATK = mtrxS[ID][5] - minATK;
		
		for(var i = 1; i <= 19; i++){
			state[i][2 * num - 1.0] = Math.ceil(growHP * mtrxG[(rare - 1.0) * 3 + parseInt(type)][i-1] + parseInt(minHP));
			state[i][2 * num - 0.0] = Math.ceil(growATK * mtrxG[(rare - 1.0) * 3 + parseInt(type)][i-1] + parseInt(minATK));
		}
		
		if(state[0][2*num] == null){
			state[0].push("ID" + num + "_HP");
			state[0].push("ID" + num + "_ATK");
		}
	}
	// ID読込・プロット
	function func(){
		var ID1 = parseFloat(document.formID1.ID1.value);
		var ID2 = parseFloat(document.formID2.ID2.value);
		
		stateLoad(ID1,1);
		stateLoad(ID2,2);
		
		document.formN1.name1.value = mtrxS[ID1][6];
		document.formN2.name2.value = mtrxS[ID2][6];
		
		var data = google.visualization.arrayToDataTable(state);
		var chart = new	google.visualization.ScatterChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}
</script>
}}}}}
#html2(){{{
<table>
<tr align=center>
<td colspan="3">
<div id="chart_div" style="width: 600px; height: 400px"></div>
</td>
</tr>

<tr align=center>
<td colspan="3"><p><form name="plotS" id="plotS">
<input type="button" value="グラフ表示" onClick="func()"></input>
</form></p></td>
</tr>

<tr align=center>
<td bgcolor="#FFF">サーヴァントID1</td>
<td><form name="formID1" id="formID1">
No. <input type="text" maxlength="6" size="6" name="ID1" value="1">
</form></td>
<td bgcolor="#FFF"><form name="formN1" id="formN1">
<input readonly type="text" maxlength="28" size="28" name="name1">
</form></td>
</tr>

<tr align=center>
<td bgcolor="#FFF">サーヴァントID2</td>
<td><form name="formID2" id="formID2">
No. <input type="text" maxlength="6" size="6" name="ID2" value="2">
</form></td>
<td bgcolor="#FFF"><form name="formN2" id="formN2">
<input readonly type="text" maxlength="28" size="28" name="name2">
</form></td>
</tr>
</table>
}}}