ポケモンレーダーチャート表示アプリ
色々行ったり来たりしてしまっていますが、、、
今回は、ポケモンレーダーチャートを表示するアプリを作成しました。
作成したアプリはこんな感じです。
テキストボックスにポケモンの名前を入力してClickを押すと、そのポケモンの種族値が表示されます。
種族値のリストは以前取得したcsvファイルを用いております。
elsammit-beginnerblg.hatenablog.com
言語はhtmlとjavascriptで作成しました。
初めてjavascriptでcsvファイル読み出しとレーダーチャートの表示を行いましたので、その部分だけ残しておこうと思います。
まずはcsvファイルの読み出しです！！
csvファイルの読み出しはこちらで実行できます。
function getCSV(){
return new Promise(resolve =>{
var req = new XMLHttpRequest();
req.open("get", "pokemon_status.csv", true); // アクセスするファイルを指定
req.send(null); // HTTPリクエストの発行
req.onload = function(){
p = convertCSVtoArray(req.responseText); // 読み込んだCSVデータをセット.
p.then(function(){
View_Chart();
resolve("0");
});
resolve("0");
}
});
}
function convertCSVtoArray(str){
return new Promise(resolve =>{
var result = []; // 最終的なデータを2次元配列で格納するための変数定義.
var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
// 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
for(var i=0;i<tmp.length;++i){
result[i] = tmp[i].split(',');
}
Name = document.getElementById("pokeName").value;
for(var i=1;i<tmp.length;i++){
if(result[i][1] == Name){
Name = result[i][1]
Attack = result[i][8]
Defense = result[i][9]
HP = result[i][7]
SpAtk = result[i][12]
SpDef = result[i][11]
Speed = result[i][10]
}
}
resolve("1");
});
}XMLHttpRequestにより指定したファイルを読み出すHttpリクエストを発行し、
レスポンスが返ってきたら読み出したCSVファイル内のデータを2次元配列に格納する処理になります。
コメントにもある通り、改行を元に行毎に文字列を分割、配列に一度格納し、
その後、1行毎にカンマ区切りで要素を取得しています。
Promise、thenを用いてシーケンシャルな処理にするために行いました。
csvファイルの読み出しや加工が重く、並列処理になってしまったためです。
次にレーダーチャートの表示の表示です。
コードはこちらになります。
function View_Chart(){
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["HP", "攻撃", "防御", "素早さ", "特防","特攻"],
datasets: [{
label: Name,
data: [HP, Attack, Defense, SpAtk, SpDef, Speed],
backgroundColor: 'RGBA(225,95,150, 0.5)',
borderColor: 'RGBA(225,95,150, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGB(46,106,177)'
}]
},
options: {
title: {
display: true,
text: 'ステータス'
},
scale:{
ticks:{
suggestedMin: 0,
suggestedMax: 200,
stepSize: 20,
callback: function(value, index, values){
return value
}
}
}
}
});
}typeでradarを指定し、datasetsにデータをセットすればグラフが表示できます。
合わせて、suggestedMaxやsuggestedMinで最大値、最小値の指定が行えます。
最後に、、、
何とか時間を見つけて簡単なアプリですが、ポケモンに関わるアプリ作ることが出来ました！！
ちょっと余裕が出たのでポケモン関係のアプリを他にも作っていきたいな？と思っております！！
それにしても、、、
デザインはどうすればいいのだろう？？
うまく作れないので、テンプレートとか使えばよいのかな？？
