Javascriptの変数の中に変数を代入するには

解決済

質問者：tajix14
質問日時：2014/10/25 18:46
回答数：1件

Google chart というAPIがあります。これを利用して株価Chartを作ります。
https://google-developers.appspot.com/chart/inte …
末尾にGoogle Chartのソースを記載していますがこのvar data内の
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
の部分を変更することによりローソクチャートが引けます。

一方、
<script type="text/javascript">
var chart;
chart = "<div id='chart'></div>";
document.write("" + chart + "");
</script>

と記載すると
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
のような株価変数が取得できるjavascriptを作成しました。

この2つを組み合わせると、株価チャートが引けることとなります。

************************
現在の苦境状況
************************
Google chart APIに、下記のように「document.write("" + chart + ""); または　"" + chart + "";または　 + chart + ;」を代入してみたのですが、チャートは表示されません。
変数の中に変数を入れたことが原因と思いますが、どのようにすればいいかアドバイス願います。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
var chart;
chart = "<div id='chart'></div>";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
document.write("" + chart + "");
], true);

var options = {
legend:'none'
};

var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

************************
GoogleChart
************************

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
], true);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2014/10/27 16:21

よくわかりませんが、こういうことでしょうか

<!DOCTYPE html>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function 株価変数が取得できる関数() {
var form = document.forms['rohsoku'];
var inputData = [], V = function(n){return parseInt(n)};
for (var i = 0; i < 256; i++) {
var g = form.elements[ i + 't' ]; if (!g) break;
var d = form.elements[ i + 'a' ].value.split(/,/);
inputData.push([g.value, V(d[0]), V(d[1]), V(d[2]), V(d[3])]);
}
return inputData;
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
function 株価チャートを引く関数() {
var data = google.visualization.arrayToDataTable(株価変数が取得できる関数(), true);
var options = { legend:'none' };
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
株価チャートを引く関数();
document.forms['rohsoku'].addEventListener('submit',function(ev){ev.preventDefault(); 株価チャートを引く関数()}, false);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

<form name=rohsoku>
<table>
<tr><td><input name=0t value=Mon><td><input name=0a value=20,28,38,45>
<tr><td><input name=1t value=Tue><td><input name=1a value=31,38,55,66>
<tr><td><input name=2t value=Wed><td><input name=2a value=50,55,77,80>
<tr><td><input name=3t value=Thu><td><input name=3a value=50,77,66,77>
<tr><td><input name=4t value=Fri><td><input name=4a value=15,66,22,68>
</table>
<button type=submit>株価を変化させて再描画</button>
</form>