2016-05-17 8 views
1

私は次のように出力の小さな機能を持っている:このデータを使ってnvd3.jsにグラフを生成することはできますか?

私がしようとし、そのデータとグラフを生成している時に惨めに失敗しています何
[ 
    { 
     "label": "A", 
     "value": 101.23 
    }, 
    { 
     "label": "B", 
     "value": 109.87 
    }, 
    { 
     "label": "C", 
     "value": 107.34 
    }, 
    { 
     "label": "D", 
     "value": 115.17 
    }, 
    { 
     "label": "E", 
     "value": 119.61 
    } 
] 

。私は、nvd3、またはd3で単純な棒グラフを生成したいと思います。

私は何を持っていることはこれです:

var output = []; 

Object.keys(input.Data).forEach(function(key){ 
    if(key.indexOf('mean') > -1){ 
    output.push({label: key,value: input.Data[key]}); 
    } 
}); 

nv.addGraph(function() { 
    var chart = nv.models.discreteBarChart() 
     .x(function (d) {return d.label}) 
     .y(function (d) {return d.value}) 


    d3.select('#chart svg') 
     .datum(output) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

私はTypeError例外を取得しています:未定義のプロパティ「長さ」を読み取ることはできません。

これを追跡するのにnvd3またはd3には慣れていませんが、バージョンが不一致である可能性があります。私はd3 v3.5.1とnvd3 v1.8.3を使用しています。しかし、ちょうど推測する。

ご協力いただきまして誠にありがとうございます。

答えて

0

データはこの形式でなければなりません。

output = [{ 
    key: "", 
    values: [{ 
    "label": "A", 
    "value": 101.23 
    }, { 
    "label": "B", 
    "value": 109.87 
    }, { 
    "label": "C", 
    "value": 107.34 
    }, { 
    "label": "D", 
    "value": 115.17 
    }, { 
    "label": "E", 
    "value": 119.61 
    }] 
}] 

作業コードhere

関連する問題