하이 차트 용 CSV 파일의 데이터를 표시하는 데 문제가 있습니다.

Question

.csv 파일의 데이터를 사용하여 하이 차트 line 그래프를 만들려고합니다. 하지만 내 웹 페이지는 x 축과 y 축의 제목 만 표시하고 있지만 데이터는 표시하지 않습니다. 내가 화면에 파일에서 읽은 데이터를 인쇄하려고

$(document).ready(function() { 
    var c = []; 
    var d = []; 

$.get('data.csv', function(data) {     
    alert("data in the file: " + data); 
    var lines = data.split('\n'); 
    $.each(lines, function(lineNo, line) { 
     var items = line.split(','); 
     c.push(items[0]);  
     d.push(parseInt(items[1])); 
    }); 
}); 

var options = { 
     chart: { 
      renderTo: 'chart', 
      defaultSeriesType: 'line' 
     }, 
     title: { 
      text: 'Weight Monitor' 
     }, 
     xAxis: { 
      title: { 
       text: 'Date Measured' 
      }, 
      categories: c 
     }, 
     yAxis: { 
      title: { 
       text: 'Weight (in Lbs)' 
      } 
     }, 
     series: [{ 
      data: d 
     }] 
}; 
var chart = new Highcharts.Chart(options); 
    }); 

파일을 제대로 읽고 난 적절한 데이터를했습니다 경우 단지 확인하지만, 여전히 내 그래프는 아무것도 표시되지 다음과 같이 코드입니다.

다음 제 CSV 파일의 데이터이다 값 왼쪽

2011-08-01 00:00:00,155 
    2011-08-02 00:00:00,156 
    2011-08-03 00:00:00,157 
    2011-08-03 00:00:00,160 

X 축에 표시하는 날짜 및 우측 값 그래프 포인트를 판독한다.

도움이 될 것입니다.

Answer 1

코드가 완벽하게 작동합니다.

<script type="text/javascript"> 

    $(document).ready(function() { 

     var c = []; 
     var d = []; 

     $.get('data.csv', function(data) { 
      var lines = data.split('\n'); 
      $.each(lines, function(lineNo, line) { 
       var items = line.split(','); 
       c.push(items[0]); 
       d.push(parseInt(items[1])); 
      }); 
     }); 

     var options = { 
       chart: { 
        renderTo: 'chart', 
        defaultSeriesType: 'line' 
       }, 
       title: { 
        text: 'reading' 
       }, 
       xAxis: { 
        title: { 
         text: 'Date Measurement' 
        }, 
        categories: c 
       }, 
       yAxis: { 
        title: { 
         text: 'reading' 
        } 
       }, 
       series: [{ 
        data: d 
       }] 
     }; 

     var chart = new Highcharts.Chart(options); 

    }); 


</script> 

복사이 모든 코드와 디렉토리에 .html 파일로 저장하고 같은 디렉토리에 data.csv 파일을 만들고 빈 줄이없고, 필요하지 않은 공백도없고 마지막에 줄 바꿈이 없어야합니다.

.html 파일을 열면 차트에 올바른 데이터가 표시됩니다.

Answer 2

설명서를 올바르게 읽어야합니다. http://www.highcharts.com/documentation/how-to-use#preprocessing

그들은 이미 CSV http://highcharts.com/studies/data-from-csv.htm의 데모를 가지고 있습니다.

문서를 검토하고 숙지하시기 바랍니다. .

Answer 3

$ .get 내에 차트를 추가하십시오. 참고 서버에서 데이터가 반환 될 때까지 기다려야하므로 Ajax 콜백 외부에서 차트를 만들 수 없습니다. this을 참조하십시오.

$.get('data.csv', function(data) { 

     var lines = data.split('\n'); 

     $.each(lines, function(lineNo, line) { 
      var items = line.split(','); 
      c.push(items[0]); 
      d.push(parseInt(items[1])); 
     }); 
     var chart = new Highcharts.Chart(options); 

    },'Text'); 

또한 시간이 문제가 될 수 "텍스트"에 명시 적으로 데이터 반환 유형을 언급.