0
我目前正在嘗試構建一個JavaScript應用程序,該應用程序可以從CSV創建度量標準。 CSV保存在我的文件瀏覽器中,每列都被提取到它自己的獨立陣列中。這些數組被設置爲由index.html文件引用的外部JavaScript文件中的全局數組。JavaScript ChartJS數組問題
有了這一切記住,下面是我的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行分別爲空。這很奇怪,因爲直到這一點,兩個數組才填充正確的數據。你們能否看到我的代碼中發生了什麼,以及我錯在哪裏?