JavaScript ChartJS数组问题

Question

我目前正在尝试构建一个JavaScript应用程序，该应用程序从CSV创建指标。 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行为null。 这很奇怪，因为在此之前，两个数组都填充有正确的数据。 你们能看到我的代码中发生了什么以及我哪里出错了吗？

Answer 1

我刚刚用以下代码解决了这个问题：

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
    });

};