Highcharts - 陣列未分配警報消息

Question

試圖獲得一些有關這種奇怪行爲的幫助。

我設法得到了高圖表，多個系列等全部設置。當使用來自內聯數組的靜態值時，這些值會正確地分配給圖表，但如果我從csv文件中提取數字，則除非使用警報消息暫停執行，否則不會分配這些值。請參閱下面的代碼

$(function() { 

     // every row on report needs 
     // category defined (left side) 
     var mycategories = []; 

     // every column on report needs 
     // seriesname defined 
     var headers = []; 
     var myseriesnames = []; 

     var lines = []; 
     var line_tokens = []; 

     // Read data from csv file 
     $.get('top10raj.csv', function(data) { 

     // Split the lines 
     lines = data.split('\n'); 
     console.log("First line : "+ lines[0]); 

     headers = lines[0].split(','); 
     for (var i = 1; i < headers.length; i++) { 
      myseriesnames.push(headers[i]); 
     } 

     // 
     // display all lines 
     // 
     for (var i = 1; i < lines.length; i++) { 

      line_tokens = lines[i].split(','); 

      console.log('Equip.No:' + line_tokens[0].trim()); // Equipment Number 
      console.log(line_tokens[1].trim());     // ActualCost 
      console.log(line_tokens[2].trim());     // ActualMaterial 
      console.log(line_tokens[3].trim());     // ActualLabor 
      console.log(line_tokens[4].trim());     // ActualOther 

      mycategories.push(line_tokens[0].trim()); 

      } 

     }); 

     alert('report ready'); 

     var myarray = [7,6,7,8,7,8,3,4,1,4,7,8,7,5]; 

     var serObj = [{ 'name': myseriesnames[0], 
         data:[8,9,8,6,5,2,3,6,5,7,4,5,8,9] 
         }, 
        { 'name': myseriesnames[1], 
         data:[8,5,6,9,8,7,4,5,2,5,8,7,8,6] 
         }, 
        { 'name': myseriesnames[2], 
         data: myarray 
         }, 
        { 'name': myseriesnames[3], 
         data: myarray 
        },     
      ]; 

     var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo:'container', 
       type: 'column' 
      }, 
      title:{ 
       text:'Chart Title' 
      }, 
      tooltip:{ 
        formatter:function(){ 
         return '<b>' + this.series.name + '</b>' +   
         '<br/><b>Item Number:</b> ' + this.x +     // X Value 
         '<br/><b>Amount:</b> ' + this.y +      // Y Value 
         '<br/><b>Other Data:</b> ';// + this.point.note; 
        } 
      },   
      credits:{enabled:false}, 
      legend:{ 
      }, 
      plotOptions: { 
       series: { 
        shadow:false, 
        borderWidth:0 
       } 
      }, 
      xAxis:{ 
       // Need to define categories for every row 
       // on the report (left side) 
       categories: mycategories, 
       lineColor:'#999', 
       lineWidth:1, 
       tickColor:'#666', 
       tickLength:3, 
       labels: { rotation:45, align:'left'}, 
       title:{ 
        text:'Equipment', 
       } 
      }, 
      yAxis:{ 
       lineColor:'#999', 
       lineWidth:1, 
       tickColor:'#666', 
       tickWidth:1, 
       tickLength:3, 
       gridLineColor:'#ddd', 
       title:{ 
        text:'Amount (USD)', 
        rotation:-90, 
        margin:50, 
       } 
      },  
      series: serObj 


     }); 

}); 

EqptNumber,ActualTotal,ActualMaterial,ActualLabor,ActualOther, 
111.3207B,666693.61,606564.37,53866.49,6262.75, 
106.3355,588647.91,240175.91,322779.00,25693.00, 
106.3307,364234.86,266598.36,97636.50,0, 
125.L8702A,356025.49,347519.49,8506.00,0, 
122.E8801A,340712.89,25483.39,33729.50,281500.00, 
127.E2201,319372.29,112362.97,307731.88,100722.56, 
107.3251A,310587.25,316225.36,35496.50,41134.61, 
622.CW88105,307762.86,7957.36,299805.50,0, 
133.1203A,307285.20,40273.19,249658.01,17354.00, 
106.3352,278737.48,132009.49,146728.00,0.01, 
107.3251ACC,310587.25,316225.36,35496.50,41134.61, 
622.CW88105CC,307762.86,7957.36,299805.50,0, 
133.1203ACC,307285.20,40273.19,249658.01,17354.00, 
106.3352CC,278737.48,132009.49,146728.00,0.01, 

我使用的csv文件顯示在源代碼的底部。

如果下面的行

alert('report ready'); 

被註釋掉了，我失去了所有的類別標籤，它們是由0..1,2,3沿X軸更換..等等。努力去理解爲什麼會發生這種情況，但到目前爲止還沒有解決問題的運氣。感謝我可以得到的任何幫助，因爲我真的想將Highcharts庫與動態數據一起使用，並且僅使用來自預定義數組的靜態數據是非常有限的。

Answer 1

問題是，您對csv文件（$.get）的請求是異步執行的，這意味着您的代碼的其餘部分在數據返回之前運行。嘗試將代碼移入回調函數，類似於

//..your code 
mycategories.push(line_tokens[0].trim()); 

      } 
     //moved your code here 
     var myarray = [7,6,7,8,7,8,3,4,1,4,7,8,7,5]; 

     var serObj = [{ 'name': myseriesnames[0], 
         data:[8,9,8,6,5,2,3,6,5,7,4,5,8,9] 
         }, 
        { 'name': myseriesnames[1], 
         data:[8,5,6,9,8,7,4,5,2,5,8,7,8,6] 
         }, 
        { 'name': myseriesnames[2], 
         data: myarray 
         }, 
        { 'name': myseriesnames[3], 
         data: myarray 
        },     
      ]; 

     var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo:'container', 
       type: 'column' 
      }, 
      title:{ 
       text:'Chart Title' 
      }, 
      tooltip:{ 
        formatter:function(){ 
         return '<b>' + this.series.name + '</b>' +   
         '<br/><b>Item Number:</b> ' + this.x +     // X Value 
         '<br/><b>Amount:</b> ' + this.y +      // Y Value 
         '<br/><b>Other Data:</b> ';// + this.point.note; 
        } 
      },   
      credits:{enabled:false}, 
      legend:{ 
      }, 
      plotOptions: { 
       series: { 
        shadow:false, 
        borderWidth:0 
       } 
      }, 
      xAxis:{ 
       // Need to define categories for every row 
       // on the report (left side) 
       categories: mycategories, 
       lineColor:'#999', 
       lineWidth:1, 
       tickColor:'#666', 
       tickLength:3, 
       labels: { rotation:45, align:'left'}, 
       title:{ 
        text:'Equipment', 
       } 
      }, 
      yAxis:{ 
       lineColor:'#999', 
       lineWidth:1, 
       tickColor:'#666', 
       tickWidth:1, 
       tickLength:3, 
       gridLineColor:'#ddd', 
       title:{ 
        text:'Amount (USD)', 
        rotation:-90, 
        margin:50, 
       } 
      },  
      series: serObj 


     }); 


     }); 

     //here's where the alert used to be 
     ///alert('report ready'); 
});