前提・実現したいこと
CanvasJSで外部から受け取ったデータを表示したい
グラフの自動描画ライブラリを使用してグラフを動的に表示させたいと
考えております。
https://canvasjs.com/javascript-charts/
あるfunctionで動的に配列データを生成してそれを渡して
そこからグラフを生成しようとしていますがうまくいきません。
どうすれば外部からのデータをうまく渡してグラフ描画できるか
ご教示いただけますでしょうか。
発生している問題・エラーメッセージ
エラーメッセージは出ていないのですが、指定形式(配列)でデータを
渡してもうまくデータが表示されません。
console.logでデータを参照してみても綺麗にデータは
渡ってきているようです。
該当のソースコード
JavaScript
1//データ生成用のfunction 2var graphData = new Array(); //(1) 3function getCalcResult() { 4 for (var i= Number(tlife[rFlg][0]) ; i < dethYear ; i++) { 5 // ~計算ロジック類~:今回の不具合とは関係ない 6 oHtml=oHtml+'</tr>' 7 var tGdata = '{label:' + i + ', y:' + bl +'}'; 8 graphData.push(tGdata); 9 } 10 var oHtml= oHtml + '</table>' 11 elm.innerHTML = oHtml; 12 renderGraph(graphData); //(2) 13} 14 15//グラフ描画用のfunction 16graphData = []; //(3) 17function renderGraph(graphData){ 18 //gDataは配列でなければいけない。 19 console.log(graphData); //(4) 20 var chart = new CanvasJS.Chart("chartContainer", { 21 animationEnabled: true, 22 theme: "light2", 23 data: [{ 24 // グラフの種類を設定する 25 type: 'column', 26 // グラフに描画するデータを設定する 27 dataPoints:[graphData] //(5) 28 }] 29 }); 30 chart.render(); 31}
試したこと
(5)の位置に(4)で出力されている下記のデータを貼り付けると
うまくグラフ描画できました。
[{label:30, y:168},{label:31, y:172},{label:32, y:58},{label:33, y:-68},{label:34, y:-430},{label:35, y:-792},{label:36, y:-1175},{label:37, y:-1558},{label:38, y:-1924},{label:39, y:-2290},{label:40, y:-2622},{label:41, y:-2925},{label:42, y:-3243},{label:43, y:-3503},{label:44, y:-3759},{label:45, y:-4013},{label:46, y:-4259}]
(4)の位置では値はArrayとしてきちんと渡ってきておりました。
(1)の位置で配列宣言しないと(4)ではundefineになってしまいます。
補足情報(FW/ツールのバージョンなど)
CanvasJSを使っています。
https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/25 02:04
2018/06/25 06:50