csv 파일을 jQuery에로드 하시겠습니까?

Question

jQuery 플로트 그래프의 소스 ​​데이터로 사용하려는 CSV 파일이 있습니다.

내가해야 :

1. 는 CSV 파일을 직접로드하는 jQuery 플러그인을 찾기?
2. CSV 파일을 JSON으로 변환하고 대신 사용 하시겠습니까?
3. 완전히 다른 것을 수행 하시겠습니까?

나는 외부 CSV 파일에 대처할 수있는 jQuery 플러그인을 찾는 많은 행운을 가지고 아니지만, 어쩌면 내가 뭔가를 놓친거야.

Answer 1

jQuery CSV 플러그인을 사용하여 배열을 가져옵니다. 차트를 필요로하지만 배열을 빌드/정렬하십시오.

jQuery CSV Plugin

당신이 jQuery로 플랫 CSV 파일을 읽는 생각 할 수있다 나에게 발생했습니다. 그건 불가능하다. 자바 스크립트를 파일 시스템에 액세스하는 것은 끔찍한 생각처럼 들립니다. 그래도 $.get()을 사용하여 서버에서 파일을로드 할 수 있습니다. 조금 독창성을 사용하는 경우

Answer 2

없음 서버 필요는 ...

이것은 서버없이 수행 할 수 있습니다.

당신은 두 가지가 필요합니다

JQuery와-CSV 파서 라이브러리 RFC 4180 준수 CSV를 구문 분석 전문 jQuery-CSV 라이브러리 할 수 ​​HTML5 File API 인 브라우저, CSV 데이터를 JavaScript 데이터로 변환하는 것 이상의 많은 기능이 있습니다. 이 데모에서는 두 가지 기능을 사용합니다 :

첫 번째는 toArrays() 메소드입니다. 여러 줄의 CSV 문자열을 가져와 2D 배열로 변환합니다.

두 번째는 출력 (모든 문자열)을 스칼라 (즉 정수/부동 소수점) 데이터로 자동 변환하는 사용자 정의 파서 훅입니다. 기본적으로 함수 콜백을 사용하여 파서에 추가 처리를 인라인 할 수 있습니다.

문자열 변수에 CSV 데이터를 할당하면 JavaScript 데이터로의 변환이 매우 간단합니다.

var csv = "" // this is the string containing the CSV data 
var data = $.csv.toArray(csv, { 
    onParseValue: $.csv.hooks.castToScalar 
}); 

그건 모두 CSV 구문 분석 단계입니다.

---

자, FLOT가 기대하는 것은 각 2 차원 배열이 독립적 인 데이터 집합을 포함 2 차원 배열의 배열입니다.

는 데이터가 먼저 빈 배열을 만들 빌드하려면

var flotData = []; 

을 다음 각 데이터는 단순히 컬렉션에 데이터 집합을 추가 CSV를 사용하여 생성 설정하십시오.

var flotData.push(data); 

HTML5를 통한 파일 처리는 비동기 콜백을 사용하여 파일을로드하기 때문에 까다로운 주제입니다. 그건 return 문이 없음을 의미합니다. 일을 간단하게하기 위해, 나는 플롯 플롯을 전역 객체로 만들뿐입니다.

첫번째는 $ (문서) .ready() 동안의 플롯을 초기화 :

var data = []; 
flot = $.flot($('#plotdiv'), data, options); 

주의 : 그래프를 초기화 할 수 있도록 더미 데이터 객체에 추가한다.

그런 다음, 파일 처리기를 추가 :

// handles csv files 
function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // reset the flot dataset 
    flot.setData([]); 
    for(var i=0, len=files.length; i<len; i++) { 
    flotFileData(files[i], i); 
    } 
} 

이 하나 또는-더 CSV 데이터 파일을로드 할 수 있다고 가정합니다. 이것은 파일 대화 상자에서 파일을 선택하면 호출됩니다. 파일 대화 상자가 실행될 때마다 새로 시작되기 때문에 데이터는 빈 상태 (예 : [])로 재설정됩니다. 그렇지 않으면 이전 데이터 세트에 추가됩니다. 파일을 통해

이 의지주기 및 파일 대화 상자에서 선택한 각 파일에 대한 flotFileData()를 호출 .. 여기

는 파일 열기 콜백 처리하기위한 코드입니다 :

function flotFileData(file, i) { 
    var reader = new FileReader(); 
    reader.readAsText(file); 
    reader.onload = function(event){ 
    var csv = event.target.result; 
    var newData = $.csv.toArrays(csv, { 
     onParseValue:$.csv.hooks.castToScalar 
    }); 
    var data = flot.getData(); 
    data[i] = newData; 
    flot.setData(data); 
    flot.setupGrid(); 
    flot.draw(); 
    }; 
    reader.onerror = function(){ alert('Unable to read ' + file.fileName); }; 
} 

을 파일을 일반 텍스트로 읽고 event.target.result를 통해 내용을 사용할 수 있도록합니다. CSV 파서는 CSV를 2 차원 배열 형식의 스칼라 데이터로 변환합니다. 여러 개의 데이터 세트를 쌓으려면 이미 플롯에있는 데이터에 추가해야하므로 flot.getData()를 통해 기존 데이터를 먼저 저장해야합니다. 새 데이터를 추가하고 flot.setData()를 통해 설정 한 다음 마지막으로 플롯을 다시 그립니다.

참고 : 그래프의 범위를 다시 계산할 필요가없는 경우 flot.setupGrid() 호출을 건너 뛸 수 있습니다.

이상적으로, 다시 그리기는 파일로드 단계마다 한 번만 수행해야하지만이 데모는 아직 최적화되지 않았습니다. 즉, 그래프는 모든 파일을 읽을 때 다시 그려집니다 (이상적이지는 않습니다).

실제로 작동하는지 보려면 jquery-csv 프로젝트에서 제공하는 'Flot Demonstration'을 살펴보십시오. analytics1.csv 및 analytics2.csv 데이터 세트를 모두로드 해 두 그래프가 어떻게 겹쳐져 있는지 확인할 수 있습니다.

서버 측 경로로 이동하여 CSV 파일을로드하려는 경우 텍스트 영역에서 CSV를로드하는 방법을 보여주는보다 기본적인 예가 있습니다.

면책 조항 : jquery-csv의 저자입니다.

업데이트 :

인해 Google 코드의 셔터 링에, 그것은 여기 JSON에 최선을 CSV입니다 변환과 같은 jquery-csv has been moved to GitHub