2016-03-12 45 views
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行分別爲空。這很奇怪,因爲直到這一點,兩個數組才填充正確的數據。你們能否看到我的代碼中發生了什麼,以及我錯在哪裏?

回答

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

};