質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

653閲覧

CanvasJSでグラフがうまく表示できない

Otazoman

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/06/22 06:03

編集2018/06/22 06:58

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

ライセンスの関連もあったので、結局chart.jsを使うことにしました。
graphDataについては数値のみの配列なので綺麗に取り出せているみたいです。

色々とご教示いただきありがとうございました。

JavaScript

1function renderGraph(){ 2 var ctx = document.getElementById('chartContainer').getContext('2d'); 3 var myChart = new Chart(ctx, { 4 type: 'line', 5 data: { 6 labels: graphLabels, 7 datasets: [{ 8 label: '収支', 9 data: graphData1, 10 borderColor: "black", 11 //backgroundColor: "blue", 12 fill:false 13 }] 14 } 15});

投稿2018/06/25 02:02

Otazoman

総合スコア44

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/06/25 02:04

解決できたようで何よりです。 ですが、私の回答が直接解決に至っていないのであればこちらの回答をベストアンサーにされた方が良いです。 同じような問題をかかえた人が後から見たときに一番先に目に付くのはベストアンサーのついた回答です。
Otazoman

2018/06/25 06:50

すいません。ご指摘ありがとうございます。
guest

0

インデントが揃っていなくて読みづらいのですが、
単に配列の階層があってないだけでは?

(5)の位置に(4)で出力されている下記のデータを貼り付けると

うまくグラフ描画できました。

とあるので質問内容にある下記では1つ多く配列を作ってしまっているということですよね。

js

1dataPoints:[graphData]

以下ではどうですか?

js

1dataPoints:graphData

投稿2018/06/22 06:40

編集2018/06/22 06:52
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Otazoman

2018/06/22 06:54

ありがとうございます。修正してみると下記のエラーになりました。 SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません canvasjs.min.js (96,308)
m.ts10806

2018/06/22 06:58 編集

結局nullになってる気がします。 {}の数が合っていませんし、コードの見直し、インデントきちんとしてもらって良いですか?
Otazoman

2018/06/22 07:10

インデント修正いたしました。申し訳ありません。 graphDataの内容を確認すると以下の通りです。その後で SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません canvasjs.min.js (96,308) となっております。 {x:30, y:168},{x:31, y:172},{x:32, y:58},{x:33, y:-68},{x:34, y:-430},{x:35, y:-792},{x:36, y:-1175},{x:37, y:-1558},{x:38, y:-1924},{x:39, y:-2290},{x:40, y:-2622},{x:41, y:-2925},{x:42, y:-3243},{x:43, y:-3503},{x:44, y:-3759},{x:45, y:-4013},{x:46, y:-4259},{x:47, y:-4505},{x:48, y:-4655},{x:49, y:-4805},{x:50, y:-4755},{x:51, y:-4705},{x:52, y:-4605},{x:53, y:-4505},{x:54, y:-4405},{x:55, y:-4305},{x:56, y:-4205},{x:57, y:-4105},{x:58, y:-4005},{x:59, y:-3905},{x:60, y:-3805},{x:61, y:-3705},{x:62, y:-3605},{x:63, y:-3505},{x:64, y:-3405},{x:65, y:-1860},{x:66, y:-1970},{x:67, y:-2080},{x:68, y:-2190},{x:69, y:-2300},{x:70, y:-2410},{x:71, y:-2520},{x:72, y:-2630},{x:73, y:-2740},{x:74, y:-2850},{x:75, y:-2960},{x:76, y:-3070},{x:77, y:-3180},{x:78, y:-3290},{x:79, y:-3400},{x:80, y:-3510},{x:81, y:-3620} [ [0...9]: [ 0: "{x:30, y:168}", 1: "{x:31, y:172}", 2: "{x:32, y:58}", 3: "{x:33, y:-68}", 4: "{x:34, y:-430}", 5: "{x:35, y:-792}", 6: "{x:36, y:-1175}", 7: "{x:37, y:-1558}", 8: "{x:38, y:-1924}", 9: "{x:39, y:-2290}" ], [10...19]: [ 10: "{x:40, y:-2622}", 11: "{x:41, y:-2925}", 12: "{x:42, y:-3243}", 13: "{x:43, y:-3503}", 14: "{x:44, y:-3759}", 15: "{x:45, y:-4013}", 16: "{x:46, y:-4259}", 17: "{x:47, y:-4505}", 18: "{x:48, y:-4655}", 19: "{x:49, y:-4805}" ], [20...29]: [ 20: "{x:50, y:-4755}", 21: "{x:51, y:-4705}", 22: "{x:52, y:-4605}", 23: "{x:53, y:-4505}", 24: "{x:54, y:-4405}", 25: "{x:55, y:-4305}", 26: "{x:56, y:-4205}", 27: "{x:57, y:-4105}", 28: "{x:58, y:-4005}", 29: "{x:59, y:-3905}" ], [30...39]: [ 30: "{x:60, y:-3805}", 31: "{x:61, y:-3705}", 32: "{x:62, y:-3605}", 33: "{x:63, y:-3505}", 34: "{x:64, y:-3405}", 35: "{x:65, y:-1860}", 36: "{x:66, y:-1970}", 37: "{x:67, y:-2080}", 38: "{x:68, y:-2190}", 39: "{x:69, y:-2300}" ], [40...49]: [ 40: "{x:70, y:-2410}", 41: "{x:71, y:-2520}", 42: "{x:72, y:-2630}", 43: "{x:73, y:-2740}", 44: "{x:74, y:-2850}", 45: "{x:75, y:-2960}", 46: "{x:76, y:-3070}", 47: "{x:77, y:-3180}", 48: "{x:78, y:-3290}", 49: "{x:79, y:-3400}" ], [50...51]: [ 50: "{x:80, y:-3510}", 51: "{x:81, y:-3620}" ], length: 52 ]
m.ts10806

2018/06/22 07:17

試してもらいたいのが ・(3)の記述を削除する ・renderGraph()の引数を無しにする。 ・(4)の値を確認 ・で、dataPoints:graphData graphData はグローバルで宣言されているので、引数で渡さなくても値を入れていったものが使えるはずです。
Otazoman

2018/06/22 07:43

ありがとうございます。試してみた結果は以下の通りです。 ・(3)の記述削除 →SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません ・renderGraph()の引数を無しにする。 ・(4)の値を確認 →objectArrayでデータは入っているようです。 ・で、dataPoints:graphData →SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません
m.ts10806

2018/06/22 07:59

データとってこれている前提もあったのであまり気にしてませんでしたが、 getCalcResult() ってどこから呼び出されているのでしょう? その中のforで使われている条件の変数の出所も気になります。 データが入っているなら「SCRIPT5007」のエラーは出なさそうなものですけど・
Otazoman

2018/06/22 08:07

getCalcResult()の呼出部分です。HTML内に埋め込んでいます。 <script type="text/javascript"> function getCalcResult() { ~略~ } function renderGraph(){ ~略~ } window.onload = getCalcResult; </script> forの条件についてはgetCalcResult() のforの直接上で 変数を取ってきています。この部分についてはテーブルに データを吐き出せているのできちんと動作しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問