javascriptとAjax?での値受け渡し

chart.js
を使ってグラフの表示に挑戦しているのですが
同じJS内下記部分
data:[231,462,693];
へCSVから取得した値を入れたいのですが
うまくいきません。
※値の渡し方をわかっておりません
(CSVの取得はjQuery.csv.jsを使用させていただいて取り込めました
http://cly7796.net/wp/javascript/ajax-get-csv/）

hrml内には
231,462,693と表示されたのですがどうすれば良いのか
教えていただけませんでしょうか。

chart.thml

コード
<!DOCTYPE html>
<html lang="en">
<style>
@media screen and (min-width: 768px) {
  .chart_container {
    width: 640px;
    margin: auto;
  }
}
</style>
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jQuery.csv.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="js/mychart.js"></script>
    <title>A</title>
</head>
<body>

<!--ここにグラフが挿入されます-->
<div style="width: 600; height: 600;">
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
<br/>
<form name="pullForm">
    <select name="pullMenu">
		<option value="a_data.csv">a_data.csv</option>
		<input type="hidden" name="graph_title" value="グラフタイトル">
		<input type="hidden" name="target_title" value="グラフタイトル２">
    </select>
</form>

<!--ボタンを押すとリロードします。-->
<input type="button" id="update_chart" value="グラフ表示" onclick="main()"/>
<!--ここにCSVデータが挿入されます-->
<div id="news"></div>
</body>
</html>

a_data.csv

1, 3, 22, 6
2, -24, 15, 8
3, -20, 32, 15

data.csv

日付,目標
1,231
2,462
3,693

mychart.js

function csv2Array(str) {
	var csvData = [];
	//CR削除
	str = str.replace(/\r\n/g, '\n');
	//空行削除
	str = str.replace(/\n+/g, '\n');
	//空白削除
	str = str.replace(/\s+,|,\s+/g, ',');
	var lines = str.split('\n');
	for (var i = 0; i < lines.length; i++) {
		var cells = lines[i].split(",");
		csvData.push(cells);
	}
	return csvData;
}

var insert = '';
var csvList;
$(function t_csv(){
	var target_csv = '#news';
	$.ajax({
		dataType: 'text',
		url: 'h_j_t_data2.csv',
		success: function(data) {
			csvList = $.csv()(data);
			for(var i = 1, n = csvList.length; i < n; i++){
				insert += ( csvList[i][1] + ( i!=n-1 ? "," : "" ) );
			}
			$(target_csv).append(insert);
		}
	});
});


// リクエストにjqueryを利用する場合
function main_jquery() {
	var csvData = $.ajax({
	//グラフ表示内容取得
	//url: 'j_data.csv',
	url: document.pullForm.pullMenu.value,
	dataType: 'text',
	cache: false
	//cache: true
	}).then(function (resText) {
		var data = csv2Array(resText);
		drawBarChart(data)
	})
}


//colormapもどき
function mycolmap(l) {
	function rgbaStr(rgba) {
	return 'rgba(' + rgba.join(',') + ')';
	}
	var cStr = [];
	var color_from = [54, 162, 235, 0.3];
	var color_to = [255, 99, 132, 0.3];
	var l1 = l - 1;
	for (var i = 0; i < l; i++) {
		var c = [];
		var j = 0;
		for (; j < 3; ++j) {
			c[j] = Math.floor(color_from[j] * (l1 - i) / l1 + color_to[j] * (i) / l1);
		}
		// alpha doesn't need floor
		c[j] = color_from[j] * (l1 - i) / l1 + color_to[j] * (i) / l1;
		cStr[i] = rgbaStr(c)
	}
	return cStr;
}

//common part

function drawBarChart(data) {

	// set chart labels and data
	var tmpLabels = [];
	var dataList = [];
	//var nameList2 = ["A", "B", "C"];
	var nameList = ["D", "E", "F"];

	//先頭行の列数からデータ数を導出する
	var numData = data[0].length-1;
	var bgcolList = mycolmap(numData);

	for (var i = 0; i < numData; i++) {
		dataList[i] = [];
	}

	for (var row in data) {
		tmpLabels.push(data[row][0])
		for (var i = 0; i < numData; i++) {
			dataList[i].push(data[row][i+1]);
		}
	};

	var datasetList = [];
	for (var i = 0; i < numData; i++) {
		datasetList.push({
			label: nameList[i],
			backgroundColor: bgcolList[i],
			data: dataList[i]
		});
	}

	datasetList.push({
		type: 'line',
		label: document.pullForm.target_title.value,
		scaleShowLabels : false,
		backgroundColor: "rgba(70, 150, 150, 1)",
		fill: false,
		//data:arr;
		data:[231,462,693]/////CSVから値を入れたい箇所/////
	});
	var chartData = {
		labels: tmpLabels,
		datasets: datasetList
	};

	var ctx = document.getElementById("myChart").getContext("2d");
	ctx.canvas.width = 1000;
	ctx.canvas.height = 600;
	// for chart.js 2.0

	var myChart = new Chart(ctx, {
		type: 'bar',
		data: chartData,
		options: {
			title: {
				display: true,
				text: document.pullForm.graph_title.value, //グラフの見出し
				padding:6
			},
			scales: {
				xAxes: [{
					stacked: true, //積み上げ棒グラフにする設定
					ticks: {
						autoSkip: false,
						maxRotation: 90,
						minRotation: 90
					}
				}],
				yAxes: [{
					stacked: true,//積み上げ棒グラフにする設定
					scaleLabel: {
						display: true,
						labelString: 'TEST',
						fontSize: 14
					}
				}]
			},
			legend: {
				display: true,
				position: 'right'
			}
		}
	});

}

// ここがメイン
function main() {
  main_jquery();
}

main();

kei344

2016/12/05 09:56

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

abbey000

2016/12/05 10:38

アドバイスありがとうございます、編集しました。すこしでも見やすくなっていれば良いのですが

kei344

2016/12/06 03:34

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

abbey000

2016/12/06 03:53

何度もすみませんでした。コードもできるだけ整理して全部記載してみました。

行動規範の内容に同意します

回答1件

ベストアンサー

手元で試していないのですが、こういう感じでしょうか。datasetListが後で何かに使われている気がしますが、かかれていないので考慮していないです。

JavaScript
1$( function() {
2	$.ajax( {
3		url: 'data.csv',
4		success: function( data ) {
5			var arr = [], csvList = $.csv()( data ), i, n;
6			for ( i = 1, n = csvList.length; i < n; i++ ) {
7				arr.push( csvList[ i ][ 1 ] );
8			}
9			datasetList.push( {
10				type: 'line',
11				label: 'グラフのラベル',
12				scaleShowLabels : false,
13				backgroundColor: 'rgba( 70, 150, 150, 1 )',
14				fill: false,
15				data: arr
16			} );
17
18		}
19	} );
20} ); // 未テスト

追記：

元質問が編集されてしまっているため、無意味な回答になっています。下記「2016/12/05 19:32 投稿」に対して回答しました。

【質問編集履歴｜teratail（テラテイル）】
https://teratail.com/questions/history-questions/57696

投稿2016/12/05 12:35

編集2016/12/06 05:04

kei344

総合スコア69398

abbey000

2016/12/06 03:16

>datasetListが後で何かに使われている気がしますが、かかれていないので考慮していないです。おっしゃるとおりで別の場所で使用しておりました。いろいろなサイトを参考にあれこれしながら、書いていたのを整理してみました。

kei344

2016/12/06 05:19

どのように解決したかコードを回答欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。また、私の回答ではなくその解決方法をもって「解決済」にされることをお勧めします。

abbey000

2016/12/06 05:22

初期の質問内容では、回答いただいたソースで間違いなさそうなのでベストアンサーに選ばせていただきました。 >元質問が編集されてしまっているため、無意味な回答になっています。下記「2016/12/05 19:32 投稿」に対して回答しました。となっており、確かに質問のソースを変えてしまえば無意味な回答になりますねすみませんでした。改めて質問をしなおします。

行動規範の内容に同意します