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

javascript/成長曲線 - (2015/12/10 (木) 00:09:55) のソース

#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 ###',
			},
			vAxis: {
				minValue:0,
				maxValue:20000,
				minorGridlines: {count: '4'},
			},
			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 reset(){
		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][0] = 'Lv';
	}
	// 配列・グラフ準備
	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);
		
		// 成長曲線
		// [5(n-1)+0][]:早熟	[5(n-1)+2][]:平均	[5(n-1)+4][]:晩成	(n = rare)
		// [5(n-1)+1][]:早熟(弱)					[5(n-1)+3][]:晩成(弱)	<- 2015.12.09追加
		// [][0]:Lv1	[][1-]:Lv(5n)
		var csvText = loadCSV('http://www9.atwiki.jp/f_go/pub/csv/servantGrow.csv');
		mtrxG = textMtrx(csvText);
		
		reset();
		stateLoad(1,1,1);
		stateLoad(1,2,2);
		
		var data = google.visualization.arrayToDataTable(state);
		var chart = new	google.visualization.ScatterChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}
	// 計算
	function stateLoad(ID, num,HA){
		var rare = mtrxS[ID][0];
		var type = mtrxS[ID][1];
		var min = mtrxS[ID][2*HA+0.0];
		var grow = mtrxS[ID][2*HA+1.0] - min;
		
		if(ID != 0){
			if(HA == 1)		{state[0].push("No." + ID + "_HP");}
			else if(HA == 2){state[0].push("No." + ID + "_ATK");}
			for(var i = 1; i <= 19; i++){
				state[i].push(Math.ceil(grow * mtrxG[(rare-1.0)*5+parseInt(type)][i-1] + parseInt(min)));
			}
		}
		document.forms["formN" + num].elements["name" + num].value = mtrxS[ID][6];
	}
	// ID読込・プロット
	function func(){
		reset();
		
		for(var i = 1; i <= 6; i++){
			var ID = document.forms["formID" + i].elements["ID" + i].value;
			var HA = document.forms["formHA" + i].elements["HA" + i].value;
			stateLoad(ID,i,HA);
		}
		
		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: 650px; height: 500px"></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><form name="formID1" id="formID1">
No. <input type="text" maxlength="6" size="6" name="ID1" value="1">
</form></td>
<td><form name="formHA1" id="formHA1"><select name="HA1" style="width:100px;">
<option value="1">HP</option>
<option value="2">ATK</option>
</select></form></td>
<td bgcolor="#FFF"><form name="formN1" id="formN1">
<input readonly type="text" maxlength="30" size="30" name="name1">
</form></td>
</tr>

<tr align=center>
<td><form name="formID2" id="formID2">
No. <input type="text" maxlength="6" size="6" name="ID2" value="2">
</form></td>
<td><form name="formHA2" id="formHA2"><select name="HA2" style="width:100px;">
<option value="1">HP</option>
<option value="2">ATK</option>
</select></form></td>
<td bgcolor="#FFF"><form name="formN2" id="formN2">
<input readonly type="text" maxlength="30" size="30" name="name2">
</form></td>
</tr>

<tr align=center>
<td><form name="formID3" id="formID3">
No. <input type="text" maxlength="6" size="6" name="ID3" value="0">
</form></td>
<td><form name="formHA3" id="formHA3"><select name="HA3" style="width:100px;">
<option value="1">HP</option>
<option value="2">ATK</option>
</select></form></td>
<td bgcolor="#FFF"><form name="formN3" id="formN3">
<input readonly type="text" maxlength="30" size="30" name="name3">
</form></td>
</tr>

<tr align=center>
<td><form name="formID4" id="formID4">
No. <input type="text" maxlength="6" size="6" name="ID4" value="0">
</form></td>
<td><form name="formHA4" id="formHA4"><select name="HA4" style="width:100px;">
<option value="1">HP</option>
<option value="2">ATK</option>
</select></form></td>
<td bgcolor="#FFF"><form name="formN4" id="formN4">
<input readonly type="text" maxlength="30" size="30" name="name4">
</form></td>
</tr>

<tr align=center>
<td><form name="formID5" id="formID5">
No. <input type="text" maxlength="6" size="6" name="ID5" value="0">
</form></td>
<td><form name="formHA5" id="formHA5"><select name="HA5" style="width:100px;">
<option value="1">HP</option>
<option value="2">ATK</option>
</select></form></td>
<td bgcolor="#FFF"><form name="formN5" id="formN5">
<input readonly type="text" maxlength="30" size="30" name="name5">
</form></td>
</tr>

<tr align=center>
<td><form name="formID6" id="formID6">
No. <input type="text" maxlength="6" size="6" name="ID6" value="0">
</form></td>
<td><form name="formHA6" id="formHA6"><select name="HA6" style="width:100px;">
<option value="1">HP</option>
<option value="2">ATK</option>
</select></form></td>
<td bgcolor="#FFF"><form name="formN6" id="formN6">
<input readonly type="text" maxlength="30" size="30" name="name6">
</form></td>
</tr>
</table>
}}}