我目前正在尝试构建一个从CSV创建指标的JavaScript应用程序。 CSV保存在我的文件资源管理器中，每列都被提取到自己独立的数组中。这些数组设置为index.html文件引用的外部JavaScript文件中的全局数组。
考虑到所有这些，以下是我的JavaScript代码：
function Wrap()
{
"use strict";
top.date = [];
top.numberCreated = [];
top.numberResolved = [];
top.totalCreated = [];
top.totalResolved = [];
top.numberOpen = [];
top.numberclosed = [];
this.data_csv = function()
{
d3.csv("data.csv", function(data1)
{
data1.forEach(function(obj)
{
top.date.push(obj.date.toString());
top.numberCreated.push(obj.n_create.toString());
numberResolved.push(obj.n_resolve.toString());
totalCreated.push(obj.total_create.toString());
totalResolved.push(obj.total_resolve.toString());
numberOpen.push(obj.n_open.toString());
numberclosed.push(obj.n_close.toString());
});
console.log(date);
console.log(numberCreated);
});
};
this.lineChartData =
{
labels : date,
datasets: [
{
fillColor: "rgba(77, 175, 124,1)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(255,255,255,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data : numberCreated
}
]
};
this.barChartData = {
labels : ["1/4/2016", "1/5/2016", "1/6/2016", "1/7/2016", "1/8/2016", "1/11/2016", "1/12/2016", "1/13/2016", "1/14/2016",
"1/15/2016", "1/19/2016", "1/20/2016", "1/27/2016", "1/29/2016", "2/5/2016", "2/9/2016", "2/11/2016", "2/12/2016",
"2/16/2016", "2/22/2016", "2/23/2016"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "#000",
highlightStroke: "rgba(220,220,220,1)",
data : ["1", "1", "10", "1", "8", "1", "2", "3", "2", "3", "2", "1", "2", "1", "2", "3", "2", "1", "1", "1", "7"]
}
]
};
this.doughnutData =
[
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
]
};
window.onload = function(){
var wrap = new Wrap();
wrap.data_csv();
console.log(wrap.date);
console.log(wrap.numberCreated);
var linectx = document.getElementById("linecanvas").getContext("2d");
window.myLine = new Chart(linectx).Line(wrap.lineChartData, {
responsive : true
});
var barctx = document.getElementById("barcanvas").getContext("2d");
window.myBar = new Chart(barctx).Bar(wrap.barChartData, {
responsive : true
});
var doughnutctx = document.getElementById("doughnutcanvas").getContext("2d");
window.myDoughnut = new Chart(doughnutctx).Doughnut(wrap.doughnutData, {
responsive : true
});
};
我面对代码的当前问题是top.date = [];和 top.numberCreated = [];数组在第42行和第51行分别为空。这很奇怪，因为这两个数组都填充了正确的数据。你们能不能看到我的代码中发生了什么以及我错在哪里？
答案 0 :(得分：0)
我刚刚用以下代码解决了这个问题：
function Wrap()
{
"use strict";
//var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
top.date = [];
top.numberCreated = [];
top.numberResolved = [];
top.totalCreated = [];
top.totalResolved = [];
top.numberOpen = [];
top.numberClosed = [];
this.data_csv = function()
{
//var parse = d3.time.format("%m/%d/%Y").parse;
var wrapperArray = [];
d3.csv("data.csv", function(data1)
{
/*var dataset = data.map(function(d)
{*/
data1.forEach(function(obj)
{
date.push(obj.date.toString());
numberCreated.push(obj.n_create.toString());
numberResolved.push(obj.n_resolve.toString());
totalCreated.push(obj.total_create.toString());
totalResolved.push(obj.total_resolve.toString());
numberOpen.push(obj.n_open.toString());
numberClosed.push(obj.n_close.toString());
});
console.log(date);
console.log(numberCreated);
/*});*/
});
wrapperArray.push(date);
wrapperArray.push(numberCreated);
wrapperArray.push(numberResolved);
wrapperArray.push(totalCreated);
wrapperArray.push(totalResolved);
wrapperArray.push(numberOpen);
wrapperArray.push(numberClosed);
return wrapperArray;
};
};
window.onload = function(){
//new outer()).inner()
var wrap = new Wrap();
var arrayHolder = wrap.data_csv();
top.date = arrayHolder[0];
top.numberCreated = arrayHolder[1];
top.numberResolved = arrayHolder[2];
top.totalCreated = arrayHolder[3];
top.totalResolved = arrayHolder[4];
top.numberOpen = arrayHolder[5];
top.numberClosed = arrayHolder[6];
this.lineChartData =
{
labels : top.date,
datasets: [
{
fillColor: "rgba(77, 175, 124,1)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(255,255,255,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data : top.numberCreated
}
]
};
this.barChartData = {
labels : ["1/4/2016", "1/5/2016", "1/6/2016", "1/7/2016", "1/8/2016", "1/11/2016", "1/12/2016", "1/13/2016", "1/14/2016",
"1/15/2016", "1/19/2016", "1/20/2016", "1/27/2016", "1/29/2016", "2/5/2016", "2/9/2016", "2/11/2016", "2/12/2016",
"2/16/2016", "2/22/2016", "2/23/2016"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "#000",
highlightStroke: "rgba(220,220,220,1)",
data : ["1", "1", "10", "1", "8", "1", "2", "3", "2", "3", "2", "1", "2", "1", "2", "3", "2", "1", "1", "1", "7"]
}
]
};
this.doughnutData =
[
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
]
console.log(top.date);
console.log(top.numberCreated);
var linectx = document.getElementById("linecanvas").getContext("2d");
window.myLine = new Chart(linectx).Line(lineChartData, {
responsive : true
});
var barctx = document.getElementById("barcanvas").getContext("2d");
window.myBar = new Chart(barctx).Bar(barChartData, {
responsive : true
});
var doughnutctx = document.getElementById("doughnutcanvas").getContext("2d");
window.myDoughnut = new Chart(doughnutctx).Doughnut(doughnutData, {
responsive : true
});
};