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

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

ただいまの
回答率

90.48%

  • JavaScript

    16987questions

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

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSON

    1199questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • Ajax

    1114questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • D3.js

    81questions

    D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,059

mizutama72

score 22

以下のように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"

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/09 12:41

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

    キャンセル

回答 2

checkベストアンサー

0

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は厳密に使用を守らないとエラーになるので気を付けてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/09 13:03

    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側の問題でしょうか・・・?

    キャンセル

  • 2016/05/09 13:19 編集

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

    キャンセル

  • 2016/05/23 10:46

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

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

    xs:test

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

    キャンセル

0

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
            }
        },
    }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    1ページ内に、GoogleChartsのグラフを複数表示させたい。

    2016/2/2追記 グラフが表示されない原因の一つが、データがない時だと分かりました。 グラフによっては、存在しないデータだけ非表示となるのですが、折れ線だとうまくいきま

  • 解決済

    ajaxを使いグラフを再描画できない

    laravelで開発をしております。 ajaxでとってきた値を、Chart.jsに渡し、グラフを再描画しようとしていますが、真っ白になり何も表示されません。 まず、画面読み

  • 解決済

    GoogleChartのグラフの表示について。

    前提・実現したいこと 閲覧ありがとうございます。 現在GoogleChartを色々と動かしているのですが、まずは以下のサイトを参考にグラフ表示を行いました。 htt

  • 解決済

    Chart.js 1.xのグラフを2.xで動作させたい

    前提・実現したいこと 現在Chart.js 2.1.3 で開発しているシステムの改修を行っているのですが 仕様変更でグラフの横幅が広くなったものがあり、スクロールバーでスクロー

  • 解決済

    chart.jsにて、円グラフで動的変更ができません。

    chart.jsとangular.jsを利用して、入力した数値を円グラフでアニメーションを利用し表示したいと思います。 線グラフについては実践されている方がおり、その方からソースを

  • 解決済

    JavaScriptで文字列を配列に変換する方法

    文字列を配列にする方法をご存知のかたいらっしゃいましたらご教示頂けませんでしょうか? aaa = {success: "['2017-12-08 13:57','2017-12

  • 受付中

    Chart.jsのグラフを表示できない

    MonacaのOnsen UI V2 JS Navigationと Chart.jsを用いてPage2に円グラフを表示したいのですが その方法がわかりません。 以下が今入力している

  • 解決済

    jQueryでのJSONのテーブル表示ができません

    フリー音源を制作してインターネット上でダウンロード出来る様にするために、インターネット上のヒントを元にして下記の様なJSONPを使うソースにしたのですが、上手く動作しません。 本当

同じタグがついた質問を見る

  • JavaScript

    16987questions

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

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSON

    1199questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • Ajax

    1114questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • D3.js

    81questions

    D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。