JSONを使用してSQLからC3.jsにカテゴリデータをインポートする

Question

現在、C3チャートを使用して、MVCで列グラフを動的に作成する作業を進めています。 AJAX/JSONを使用してデータベースからデータを取得することはできますが、X軸のカテゴリではなく、C3のJSONプロパティを使用してY軸座標のみをバインドできます。

私がしたいこと：縦棒グラフを動的に作成します。例えば、複数年の学生のマークは、最初の部分（カテゴリ：年）がX軸に、数値の部分が（1：50）、（2：100） （マーク）はY軸に向かう。そのような組み合わせの数は、ユーザーの要件（複数の行を持つ2つの列としてデータベースからもたらされます）に応じて動的です。私はに実行している

問題：キーに2つの異なるデータ型を指定

1. 私が欲しいとどのしない、完全に独立したシリーズとして、数値以外の部分（カテゴリ）をレンダリングしますさえ動作していません。

2. X軸には、表示される列の数に応じて整数があります。私はそれを実際のカテゴリ名に変更したいと思います。

これは私がやっていることです。私はいくつかの支援を楽しみにしてい

$.ajax({ 
    url: <Method in Controller here>, 
    type: "POST", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    data: JSON.stringify(parameters), 
    success: function (data) { 
      var myData = jQuery.parseJSON(data); 
      var testJson = $.map(myData, function (item) { 
       return { 
        Year: item.Year, 
        Marks: item.Marks 

       } 
      }); 

      var chart = c3.generate({ 
       bindto: '#chart', 
       size: { 
        width: 800 
       }, 
       data: { 
        json: testJson, 

        mimeType: 'json', 
        keys: { 
         value: ['Marks'] 
        }, 

       } 
      }); 
    } 
}); 

（https://groups.google.com/d/msg/c3js/RV1X18GZoGY/-p39m9Ngt-gJ）ここではダニエルの方法からインスピレーションを取りました。前もって感謝します！

編集：私は、データが最後に次のようになりたい： Sample Chart

Answer 1

あなたは以下のコード試すことができます。

var jsonTest = [ 
        { year: 1, marks: 50 }, 
        { year: 2, marks: 70 }, 
        { year: 3, marks: 75 }, 
        { year: 4, marks: 45 }, 
       ]; 

// The variable name chart will automatically bind itself to an id = chart 
var chart = c3.generate({ 
    data: {     
     type : 'bar', 
     json: jsonTest, 
     keys: { 
      x: 'year', 
      value: ['marks'] 
     } 
    }, 
    size: { 
     width: 400, 
    }, 
    axis: { 
     x: { 
      type: 'category' 
     } 
    }, 
    bar: { 
     width: { 
      ratio: 0.5 
     } 
    } 
}); 

を私は次の出力を得ていた。

ここにJSBinの例を示します。Bar Chart Example