C3.jsを使い、ajaxで返ってきた値でグラフを描きたい

Question

以下のようにC3.jsを使い、ajaxで返ってきた値で散布図グラフを描こうとしています。

$.ajax({
                      type: "POST",
                      url: url,
                      data: {"column":column,"type":type,"lbl":lbl},
                      dataType:'json',
                      success: function(data)
                      {
                          var ajax_data = data;
                          var test = ajax_data[1]+":'"+ajax_data[1]+"_x'";
                          var chart = c3.generate({
                              bindto: '#chart_scatter',
                              data: {
                                  xs: {
                                      test
                                  },
                                  columns: [
                                    JSON.parse(ajax_data[2]),
                                    JSON.parse(ajax_data[3]),
                                  ],
                                  type: 'scatter'
                              },
                              axis: {
                                   x: {
                                       tick: {
                                           fit: false
                                       }
                                   },
                               }
                           });
                      }

上記を実行すると、
Error: x is not defined for id = "eigo_x".
とエラーとなります。

ですが、変数testをconsole.logを使い、firefoxのfirebugで表示すると、
eigo:'eigo_x'
となっており、これをこのまま変数testの部分に貼り付けると、正常に動きます。

どうやったら、正常に動作するようになるのでしょうか？
javascriptに詳しい方、C3.jsに詳しい方、助けてください！

受け取ったdataの内容は以下の通りです。

0："gendai"
1："eigo"
2："["eigo_x","78.3","78.3",...","28.1","27.4","24.7"]"
3："["eigo","71.6","68.9","6...","31.2","29.8","28.5"]"
4："["column0","column1","co...4","column5","column6"]"
type："line_group_24"

Comments

[kei344]

取得したJSONを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

C3.js は詳しくないので generate の引数はちょっとわかりませんが、jQuery.ajax で dataType: 'json' を指定した場合、success: function(data) の data はパースされたJSONが入っています。
そのため、JSON.parse は不要です。

var ajax_data = data;
var chart = c3.generate({
	bindto: '#chart_scatter',
	data: {
		x: ajax_data[1] + '_x',
		columns: [
			ajax_data[ 2 ],
			ajax_data[ 3 ]
		],
		type: 'scatter'
	},
	axis: {
		x: {
			tick: {
				fit: false
			}
		},
	}
});

Answer 2

jsは，hashの宣言と同時にkeyに変数を使うことはできません。
変数を使いたい場合は一度空初期化して，[]でkey指定してください。
また，hashの宣言時にkey,valueを文字列で渡して初期化することはできません。
なので

var test ={};
    test[ajax_data[1]]=ajax_data[1]+"_x";
略
xs:test
略

とするか

var test = "{\""+ajax_data[1]+"\":\""+ajax_data[1]+"_x\"}";
略
xs:JSON.parse(test)
略

としたら治ると思います。前者が簡単なので，おすすめです。
ちなみにJSON.parseは厳密に使用を守らないとエラーになるので気を付けてください。

Comments

[mizutama72]

tkowさま
ご回答ありがとうございます！
教えて頂いた二つの方法でやったのですが、やはり同じエラーとなります。
JSON.parseの方は、xsの中に書くと
[SyntaxError: missing : after property id]エラーになるので、
var test = "{\""+ajax_data[1]+"\":\""+ajax_data[1]+"_x\"}";
test = JSON.parse(test);
とやってみましたが、
Error: x is not defined for id = "eigo_x".
と同じエラーとなります。

こうなると、C3.js側の問題でしょうか・・・？

[退会済みユーザー]

ですね。
http://stackoverflow.com/questions/30338691/c3-js-line-chart-getting-error-for-date
これによると，data { x:"eigo_x",
をつけ足せばいけるんじゃないかと。
ただ文字列コピペすると実行できるとのことで，指定しなかったらデフォルト値で設定できるのではないかという疑問がちょっとありますね。
本当に細かい文法ミスとかだと思うので，console.logやブレイクポイントなどを使って，フォーマット通りのデータ形式になっているかどうか確認してみてください。

[mizutama72]

tkowさま
ご連絡が遅れまして申し訳ありません。

結果として、
var test ={};
test[ajax_data[1]]=ajax_data[1]+"_x";
略
xs:test

の方式でできるようになりました！
できなかったのは、
xs:{
test
}
と{があったためのようでした。。
助かりました。ありがとうございます！