1

c3.js でグラフを作成しようとしていますが、データは外部 API から取得されています。チャートに値をプロットできるように、json データからデータとキーを取得したいと考えています。以下の外部 API 形式と js コードを追加しました。

JSON データ:

[{ 
      "label" : "A Label" ,
      "value" : -29.765957771107
    } , 
    { 
      "label" : "B Label" , 
      "value" : 0
    } , 
    { 
      "label" : "C Label" , 
      "value" : 32.807804682612
    } , 
    { 
      "label" : "D Label" , 
      "value" : 196.45946739256
    }]

JS コード: 

d3.json("http://localhost:8080/api/study", function(data) {
    var chart = c3.generate({
        bindto : '#chartContainer',
        data : {
            columns : ['label']
        },
         keys: {
            x: 'label',
            value: ['value']
        }
    });
});

ありがとうございました

4

1 に答える 1

5

C3 が必要とする形式に API データを前処理します。それは簡単です：

var convertedData = [];
apiData.forEach(function(item){
    convertedData.push([item.label, item.value]);
});

例を次に示します: http://jsfiddle.net/jrdsxvys/2/

編集: 値の配列で JSON データ オプションを使用する場合は、次のようになります。json プロパティとキー オブジェクトを設定します。

var chart = c3.generate({
    data: {
        json: data,
        keys: {
            x: 'label',
            value: ["value"]
        },
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category'
        }
    },
    legend: {
        show:false
    }
});

フィドル: http://jsfiddle.net/jrdsxvys/4/

于 2015-04-09T20:33:26.393 に答える