NVD3離散BARCHART使用JSON

我試圖把一個JSON文件到NVD3條形圖，但我不能做我想做的。我不知道很多JS的，但努力學習的最終項目在學校，所以請大家幫忙=]NVD3離散BARCHART使用JSON

繼承人我從一個例子得到了代碼：

<!DOCTYPE html> <meta charset="utf-8"> 

<link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> 

<style> 

body { overflow-y:scroll; } 

text { font: 12px sans-serif; } 

svg { display: block; } 

#chart1 svg{ height: 500px; min-width: 100px; min-height: 100px; /* margin: 10px; Minimum height and width is a good idea to prevent negative SVG dimensions... For example width should be =< margin.left + margin.right + 1, of course 1 pixel for the entire chart would not be very useful, BUT should not have errors 
*/ } 

</style> <body> 

    <div id="chart1"> 
    <svg></svg> </div> 

<script src="../lib/d3.v3.js"></script> <script src="../nv.d3.js"></script> <!-- including all the components so I don't have to minify every time I test in development --> <script src="../src/tooltip.js"></script> <script src="../src/utils.js"></script> <script src="../src/models/axis.js"></script> <script src="../src/models/discreteBar.js"></script> <script src="../src/models/discreteBarChart.js"></script> <script> 





historicalBarChart = [ { 
    key: "Cumulative Return", 
    values: [ 
     { 
     "label" : "A" , 
     "value" : 29.765957771107 
     } , 
     { 
     "label" : "B" , 
     "value" : 0 
     } , 
     { 
     "label" : "C" , 
     "value" : 32.807804682612 
     } , 
     { 
     "label" : "D" , 
     "value" : 196.45946739256 
     } , 
     { 
     "label" : "E" , 
     "value" : 0.19434030906893 
     } , 
     { 
     "label" : "F" , 
     "value" : 98.079782601442 
     } , 
     { 
     "label" : "G" , 
     "value" : 13.925743130903 
     } , 
     { 
     "label" : "H" , 
     "value" : 5.1387322875705 
     } 
    ] } ]; 




nv.addGraph(function() {  var chart = nv.models.discreteBarChart() 
     .x(function(d) { return d.label }) 
     .y(function(d) { return d.value }) 
     .staggerLabels(true) 
     //.staggerLabels(historicalBarChart[0].values.length > 8) 
     .tooltips(false) 
     .showValues(true) 
     .transitionDuration(250) 
     ; 

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

    nv.utils.windowResize(chart.update); 

    return chart; }); 


</script>

我的問題是在這裏：

historicalBarChart = [ 
    { 
    key: "Cumulative Return", 
    values: [ 
     { 
     "label" : "A" , 
     "value" : 29.765957771107 
     } , 
     { 
     "label" : "B" , 
     "value" : 0 
     } , 
     { 
     "label" : "C" , 
     "value" : 32.807804682612 
     } , 
     { 
     "label" : "D" , 
     "value" : 196.45946739256 
     } , 
     { 
     "label" : "E" , 
     "value" : 0.19434030906893 
     } , 
     { 
     "label" : "F" , 
     "value" : 98.079782601442 
     } , 
     { 
     "label" : "G" , 
     "value" : 13.925743130903 
     } , 
     { 
     "label" : "H" , 
     "value" : 5.1387322875705 
     } 
    ] 
    } 
];

我想把我的Json值放在那裏，我該怎麼做？

這是我的JSON文件，一個如果對於X，和其它用於Y軸：

X軸：

{ 「periodos」：[ 「112」，「121」，「122 「」131「，」132「，」141「]}

Y軸：

{ 」reprovados「：[ 」247「，」164「，」250「，」147「，」 144 」，‘0’]}

如果有人能請你回答我儘可能完整，我會非常感激=]

來源

2014-05-21 Thiago Mendes

我不知道你需要什麼樣的圖形，因爲你說你要在diferent尺寸的值。我創造了在同一維度中的所有數據的圖表......我想你將能夠滿足它您的需求。

DEMO

var json1 = {"periodos":["A","B","C","D","E","F","G","H","I"]}; 
var json2 = {"reprovados":["20","0","32.81","396.46","0.19","98.08","13.93","5.14","15.14"]}; 

var data = [{values: []}]; 
for(var i = 0; i < json1.periodos.length; i++){ 
    data[0].values.push({ 
    label: json1.periodos[i], 
    value: Number(json2.reprovados[i]) 
    }); 
}; 

... 

d3.select('#chart1 svg').datum(data) 

...

來源

2014-05-22 14:10:35 rafaelcastrocouto

內periodos值應在X上的描述，和值內reprovados鋼筋尺寸，這是這樣做是錯誤的很好，只是名稱。我怎樣才能把週期值放在X軸上？順便說一句，謝謝很多人！你是個天才hahahah –

現在我完全理解了......更新了演示...... thx恭維 – rafaelcastrocouto

Thansk，現在完美了哈哈我怎樣才能從文件傳遞json值，而不是寫在變量上呢？！ –

NVD3離散BARCHART使用JSON

回答

相關問題