前提・実現したいこと
c3.jsを使ってデータベースから取得した値を使ってグラフを作成しようと思っています。
データベースの値は、サーバーサイドのJavascriptで作成し、その戻り値をc3.jsのオブジェクトに渡して表示することを考えています。
発生している問題・エラーメッセージ
サーバーサイドの値の取得自体はできており、個別の変数として呼び出し元に返すことは可能なのですが、値が可変のため、c3.jsに渡す時のオブジェクトの形(配列要素を含む)で渡そうと思っています。そこで、同じオブジェクトをクライアント側で参照できた方法で、値をセットしているのですが、うまくいきません。
Cannot read property "columns" from undefined```
該当のソースコード
サーバーサイドスクリプトはintramartというフレームワークを使用しています。
ボタンをクリックした時にデータベースの値を参照してグラフ表示します。
html
1 <imart type="jsspRpc" name="asinfo" page="jssp_rpc_test/sample1" /> 2 <script language="JavaScript"> 3 // c3.jsで使用するオブジェクトの形式(データベースで参照する内容と値は異なるが構造は同じ) 4 const chart00 = ({ 5 data: { 6 columns: [ 7 ['data1', 430, 200, 100, 400, 150, 250], 8 ['data2', 130, 100, 140, 200, 150, 50] 9 ], 10 type: 'bar' 11 }, 12 bar: { 13 width: { 14 ratio: 0.5 15 } 16 }, 17 axis: { 18 x: { 19 type: 'category', 20 categories: ['1月', '2月', '3月', '4月', '5月', '6月'] 21 } 22 } 23 }); 24 function execute(){ 25 try{ 26 var chart = new Object(); 27 var result = asinfo.getHarmony(args); // chart00と同じ型のオブジェクトを返す 28 chart = c3.generate(result); 29 // chart = c3.generate(chart00); 上記2行をこれに置き換えると正常表示 30 } 31 catch(ex){ 32 alert(ex.message); 33 return; 34 } 35 } 36 </script> 37 </imart> 38 <input type="button" value="実行(同期)" onclick="execute();"> 39 <div id="chart" style="border:1px solid gray; text-align:right; width:700px;"></div>
javascript
1function getHarmony( args ){ 2 var db = new SharedDatabase('as400'); 3 var sql = "select su2nend, " + 4 "sum(su2ur01) as ur1, sum(su2ur02) as ur2, sum(su2ur03) as ur3, " + 5 "sum(su2ur04) as ur4, sum(su2ur05) as ur5, sum(su2ur06) as ur6, " + 6 "sum(su2ur07) as ur7, sum(su2ur08) as ur8, sum(su2ur09) as ur9, " + 7 "sum(su2ur10) as ur10, sum(su2ur11) as ur11, sum(su2ur12) as ur12, " + 8 "sum(su2ar01) as ar1, sum(su2ar02) as ar2, sum(su2ar03) as ar3, " + 9 "sum(su2ar04) as ar4, sum(su2ar05) as ar5, sum(su2ar06) as ar6, " + 10 "sum(su2ar07) as ar7, sum(su2ar08) as ar8, sum(su2ar09) as ar9, " + 11 "sum(su2ar10) as ar10, sum(su2ar11) as ar11 ,sum(su2ar12) as ar12 " + 12 "from mylib.uritrn " + 13 "where su2nend >= 2017 " + 14 "group by su2nend " + 15 "order by su2nend"; 16 var ret = db.select(sql); 17 var graph = new Object(); 18 for (var i = 0; i < ret.countRow; i++) { 19 graph['data']['columns'][i][0] = ret.data[i].su2nend; // ここでエラー発生と思われます 20 graph['data']['columns'][i][1] = ret.data[i].ur1; 21 graph['data']['columns'][i][2] = ret.data[i].ur2; 22 graph['data']['columns'][i][3] = ret.data[i].ur3; 23 graph['data']['columns'][i][4] = ret.data[i].ur4; 24 graph['data']['columns'][i][5] = ret.data[i].ur5; 25 graph['data']['columns'][i][6] = ret.data[i].ur6; 26 graph['data']['columns'][i][7] = ret.data[i].ur7; 27 graph['data']['columns'][i][8] = ret.data[i].ur8; 28 graph['data']['columns'][i][9] = ret.data[i].ur9; 29 graph['data']['columns'][i][10] = ret.data[i].ur10; 30 graph['data']['columns'][i][11] = ret.data[i].ur11; 31 graph['data']['columns'][i][12] = ret.data[i].ur12; 32 } 33 graph['data']['type'] = 'bar'; 34 graph['bar']['width']['ratio'] = 0.5; 35 graph['axis']['x']['type'] = 'category'; 36 graph['axis']['x']['categories'][0] = "1月"; 37 graph['axis']['x']['categories'][1] = "2月"; 38 graph['axis']['x']['categories'][2] = "3月"; 39 graph['axis']['x']['categories'][3] = "4月"; 40 graph['axis']['x']['categories'][4] = "5月"; 41 graph['axis']['x']['categories'][5] = "6月"; 42 graph['axis']['x']['categories'][6] = "7月"; 43 graph['axis']['x']['categories'][7] = "8月"; 44 graph['axis']['x']['categories'][8] = "9月"; 45 graph['axis']['x']['categories'][9] = "10月"; 46 graph['axis']['x']['categories'][10] = "11月"; 47 graph['axis']['x']['categories'][11] = "12月"; 48 return graph;
試したこと
javascript
1// var result = asinfo.getHarmony(args); // chart00と同じ型のオブジェクトを返す 2// chart = c3.generate(result); 3 chart = c3.generate(chart00); 上記2行をこれに置き換えると正常表示
constで定義した中身を表示したところ、当然正常なので、サーバーサイド側だけの問題であることは間違いないのですが、
この時、クライアント側で、const chart00 として定義してあるオブジェクトを直接参照すると、値が参照できますが、その値をコピーしたオブジェクトを参照するとエラーになります。
javascript
1 alert(chart00['data']['type']); // とした時は、正常 2 alert(chart['data']['type']); // とした時は、エラー
下記については、クライアントサイドからのエラーメッセージになりますが、
Cannot read property "type" from undefined```
というエラーが、サーバーサイド側で値をセットするのと同じく出ますので、最初はイントラマート固有の問題かと思ったのですが、おそらくオブジェクトの扱い方、初期化の問題ではないかと思います。いろいろネット上で検索しても私の理解の範疇を越えており、よく判りません。
オブジェクトの初期化の方法についてアドバイス頂けたら有難いです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー