하이 차트 - 경고 메시지없이 배열이 할당되지 않았습니다.

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

이 주석 경우

, 나는 모든 범주 레이블을 잃고 그들은 X 축을 따라 등 .. 0..1,2,3로 대체됩니다. 왜 이런 일이 일어 났는지 이해하려고 애를 썼지 만, 고칠 때 행운은 없습니다. 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'); 
});