Google Chart APIを使用して株価Chartを作成する方法と問題点

2014/10/25 18:46

このQ&Aのポイント

Google Chart APIを使用して株価Chartを作成する方法とは？
Javascriptの変数の中に変数を代入する方法とは？
Google Chart APIを使用した株価Chart作成での問題点とは？

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

Google chart というAPIがあります。これを利用して株価Chartを作ります。 https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart 末尾に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>

tajix14
お礼率72% (175/242)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Ogre7077
ベストアンサー率65% (170/258)

2014/10/27 16:21 回答No.1

よくわかりませんが、こういうことでしょうか <!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>

質問者