-1
我想加載CSV數據和繪圖基於返回的數據。我可以看到數據登錄到控制檯時,但它不會被繪製在圖表。當我使用寫入的函數替換從控制檯複製的數據以返回數據時,圖形會被繪製。我不知道我錯過了什麼。如何使用動態CSV數據與nvd3和angular2可視化
我的代碼看起來像這樣
// Options and Data definitions
declare let d3, nv: any;
export const ChartTypes = [
'lineChart',
'discreteBarChart'
];
const color = d3.scale.category20()
export const AllOptions = {
discreteBarChart: {
chart: {
type: 'discreteBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: true,
valueFormat: function(d){
return d3.format(',.4f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
}
}
獲取數據到對象
export const AllData = {
// populate the empty object with your data
discreteBarChart: getCsvData()
}
的getCsvData()函數,從CSV得到數據如下:
function getCsvData(){
d3.csv("app/test.csv", function(error, data){
var dynamicData = data;
console.log(data)
// create an empty object that nv is expecting
var discreteBarChart = [
{
key: "Cumulative Return",
values: []
}
];
data.forEach(function (d){
d.value = +d.value
discreteBarChart[0].values.push(d)
})
console.log('The data is'+JSON.stringify(discreteBarChart))
})
return discreteBarChart
}
當我試圖做這樣的功能提醒時,我得到了undefined
alert(JSON.stringify(getCsvData()))
我懷疑問題是,我把返回的語句放在錯誤的地方。