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

回答

相关问题