CSV 데이터를 chart.js로 그래프화합니다!
실제로 하려고 했는데, 파트 파트의 방법은 여러가지 페이지에 있습니다만, 전부를 통해서가 없을까, 라고 느꼈기 때문에 실어 보았습니다. 라고 할까, 저것 이것 하고 어떻게든 할 수 있었으므로, 남겨 두려고 생각했습니다.
데이터 및 실행 결과 그래프
원래 CSV 데이터
data.csvJanuary, -10.4, -5.5
Feburary, -30.3, 1
March, 3.8, 12.3
April, 5.9, 13.5
May, 9.6, 16.4
June, 12.0, 19.4
July, 16.1, 28.2
August, 20.6, 30.3
September, 17.2, 26.2
October, 15.0, 20.8
November, 5.9, 10.1
December, 0.0, 3.3
실행 결과
프로그램
html에서는 Chart.min.js, mychart.js 스크립트를 읽고 그래프 그리기를위한 canvas를 정의하기 만하면됩니다. 참고 :이 프로그램은 chart.js 2.x 용입니다. htp // cd js. c ぉ df ぁ. 이 m/아자 x/ぃbs/짱 rt. js / 1.0.2 / char rt. 모두. js 어쨌든, chart.js의 1.x를 읽고 있으면 움직이지 않으므로 주의를.
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="mychart.js"></script>
<title>chart of results</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
<div style="width: 100%; height: 100%;">
<canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
</body>
</html>
1) ajax로 CSV 파일을로드하고, 2) CSV에서 2 차원 배열을 추출, 3) chart.js dataset 용 배열을 준비하고, 4) chart.js로 그립니다.
mychart.js// 2) CSVから２次元配列に変換
function csv2Array(str) {
var csvData = [];
var lines = str.split("\n");
for (var i = 0; i < lines.length; ++i) {
var cells = lines[i].split(",");
csvData.push(cells);
}
return csvData;
}
function drawBarChart(data) {
// 3)chart.jsのdataset用の配列を用意
var tmpLabels = [], tmpData1 = [], tmpData2 = [];
for (var row in data) {
tmpLabels.push(data[row][0])
tmpData1.push(data[row][1])
tmpData2.push(data[row][2])
};
// 4)chart.jsで描画
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: tmpLabels,
datasets: [
{ label: "Tokyo", data: tmpData1, backgroundColor: "red" },
{ label: "Osaka", data: tmpData2, backgroundColor: "blue" }
]
}
});
}
function main() {
// 1) ajaxでCSVファイルをロード
var req = new XMLHttpRequest();
var filePath = 'data.csv';
req.open("GET", filePath, true);
req.onload = function() {
// 2) CSVデータ変換の呼び出し
data = csv2Array(req.responseText);
// 3) chart.jsデータ準備、4) chart.js描画の呼び出し
drawBarChart(data);
}
req.send(null);
}
main();
실행 예
폴더 구성은 다음과 같습니다.
├── index.html
├── mychart.js
└── data.csv
HTTP 서버를 설정합니다. python3, nodejs, ruby, php 중 하나가 있으면 간단합니다. 여기에서는 9000번 포트로 세워 보겠습니다.
terminal (파이썬 예제)python3 -m http.server -port 9000
terminal(nodejs의 예)npm install -g http-server
http-server -p 9000
terminal(ruby의 예)ruby -run -e httpd . -p 9000
terminal (php의 예)php -S localhost:9000
위에서,
http://localhost:9000
에 액세스하면 차트가 보일 것입니다!
참고
ajax, csv 부분은 거의 아래 사이트의 소스를 이용하였습니다. 첫 아약스! 이었기 때문에, 매우 참고가 되었습니다.
CSV 파일을 자바 스크립트에서 읽는 방법 @gist
자바스크립트에서 CSV 파일을 불러오는 방법 @UX MILK
chart.js의 부분은 다음을 참고로 만들었습니다.
Loading an external JSON into ChartJs@stackoverflow
Plotting JSON Data with Chart.js@stackoverflow
Chart.js를 사용하여 막대형 차트, 꺾은선형 차트, 레이더 차트 및 원형 차트를 표시하세요! @WEB 제작 내비게이션
최소 구성의 http 서버는, 이하를 참고로 했습니다. 감사합니다.
Node.js의 http-server라고 하는 커맨드 라인의 웹 서버가 편리@firegoby.jp
원라이너 웹서버를 모아본 @qiita
마지막으로
실제로 만들었던 프로그램에서는 CSV 공백 제거, 공부용으로 jquery로 읽어들여, 장래 열수가 늘어났을 때에 리스트에의 푸시로의 dataset 작성. 등이 들어있었습니다. 하지만 소스가 길어졌기 때문에 여기에서는 최소 구성에 그치고 다음 게시물로 돌리기로 하겠습니다.
2016-09-25 21:15 추가
낭비로 복잡한 코드 (CSV 데이터를 chart.js화, 그 2)
에 이어(긴 소스 전문)를 실었습니다.
Reference
이 문제에 관하여(CSV 데이터를 chart.js로 그래프화합니다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tabetomo/items/f1fa423bf826a1d2efb8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
January, -10.4, -5.5
Feburary, -30.3, 1
March, 3.8, 12.3
April, 5.9, 13.5
May, 9.6, 16.4
June, 12.0, 19.4
July, 16.1, 28.2
August, 20.6, 30.3
September, 17.2, 26.2
October, 15.0, 20.8
November, 5.9, 10.1
December, 0.0, 3.3
html에서는 Chart.min.js, mychart.js 스크립트를 읽고 그래프 그리기를위한 canvas를 정의하기 만하면됩니다. 참고 :이 프로그램은 chart.js 2.x 용입니다. htp // cd js. c ぉ df ぁ. 이 m/아자 x/ぃbs/짱 rt. js / 1.0.2 / char rt. 모두. js 어쨌든, chart.js의 1.x를 읽고 있으면 움직이지 않으므로 주의를.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="mychart.js"></script>
<title>chart of results</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
<div style="width: 100%; height: 100%;">
<canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
</body>
</html>
1) ajax로 CSV 파일을로드하고, 2) CSV에서 2 차원 배열을 추출, 3) chart.js dataset 용 배열을 준비하고, 4) chart.js로 그립니다.
mychart.js
// 2) CSVから２次元配列に変換
function csv2Array(str) {
var csvData = [];
var lines = str.split("\n");
for (var i = 0; i < lines.length; ++i) {
var cells = lines[i].split(",");
csvData.push(cells);
}
return csvData;
}
function drawBarChart(data) {
// 3)chart.jsのdataset用の配列を用意
var tmpLabels = [], tmpData1 = [], tmpData2 = [];
for (var row in data) {
tmpLabels.push(data[row][0])
tmpData1.push(data[row][1])
tmpData2.push(data[row][2])
};
// 4)chart.jsで描画
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: tmpLabels,
datasets: [
{ label: "Tokyo", data: tmpData1, backgroundColor: "red" },
{ label: "Osaka", data: tmpData2, backgroundColor: "blue" }
]
}
});
}
function main() {
// 1) ajaxでCSVファイルをロード
var req = new XMLHttpRequest();
var filePath = 'data.csv';
req.open("GET", filePath, true);
req.onload = function() {
// 2) CSVデータ変換の呼び出し
data = csv2Array(req.responseText);
// 3) chart.jsデータ準備、4) chart.js描画の呼び出し
drawBarChart(data);
}
req.send(null);
}
main();
실행 예
폴더 구성은 다음과 같습니다.
├── index.html
├── mychart.js
└── data.csv
HTTP 서버를 설정합니다. python3, nodejs, ruby, php 중 하나가 있으면 간단합니다. 여기에서는 9000번 포트로 세워 보겠습니다.
terminal (파이썬 예제)python3 -m http.server -port 9000
terminal(nodejs의 예)npm install -g http-server
http-server -p 9000
terminal(ruby의 예)ruby -run -e httpd . -p 9000
terminal (php의 예)php -S localhost:9000
위에서,
http://localhost:9000
에 액세스하면 차트가 보일 것입니다!
참고
ajax, csv 부분은 거의 아래 사이트의 소스를 이용하였습니다. 첫 아약스! 이었기 때문에, 매우 참고가 되었습니다.
CSV 파일을 자바 스크립트에서 읽는 방법 @gist
자바스크립트에서 CSV 파일을 불러오는 방법 @UX MILK
chart.js의 부분은 다음을 참고로 만들었습니다.
Loading an external JSON into ChartJs@stackoverflow
Plotting JSON Data with Chart.js@stackoverflow
Chart.js를 사용하여 막대형 차트, 꺾은선형 차트, 레이더 차트 및 원형 차트를 표시하세요! @WEB 제작 내비게이션
최소 구성의 http 서버는, 이하를 참고로 했습니다. 감사합니다.
Node.js의 http-server라고 하는 커맨드 라인의 웹 서버가 편리@firegoby.jp
원라이너 웹서버를 모아본 @qiita
마지막으로
실제로 만들었던 프로그램에서는 CSV 공백 제거, 공부용으로 jquery로 읽어들여, 장래 열수가 늘어났을 때에 리스트에의 푸시로의 dataset 작성. 등이 들어있었습니다. 하지만 소스가 길어졌기 때문에 여기에서는 최소 구성에 그치고 다음 게시물로 돌리기로 하겠습니다.
2016-09-25 21:15 추가
낭비로 복잡한 코드 (CSV 데이터를 chart.js화, 그 2)
에 이어(긴 소스 전문)를 실었습니다.
Reference
이 문제에 관하여(CSV 데이터를 chart.js로 그래프화합니다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tabetomo/items/f1fa423bf826a1d2efb8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
python3 -m http.server -port 9000
npm install -g http-server
http-server -p 9000
ruby -run -e httpd . -p 9000
php -S localhost:9000
ajax, csv 부분은 거의 아래 사이트의 소스를 이용하였습니다. 첫 아약스! 이었기 때문에, 매우 참고가 되었습니다.
CSV 파일을 자바 스크립트에서 읽는 방법 @gist
자바스크립트에서 CSV 파일을 불러오는 방법 @UX MILK
chart.js의 부분은 다음을 참고로 만들었습니다.
Loading an external JSON into ChartJs@stackoverflow
Plotting JSON Data with Chart.js@stackoverflow
Chart.js를 사용하여 막대형 차트, 꺾은선형 차트, 레이더 차트 및 원형 차트를 표시하세요! @WEB 제작 내비게이션
최소 구성의 http 서버는, 이하를 참고로 했습니다. 감사합니다.
Node.js의 http-server라고 하는 커맨드 라인의 웹 서버가 편리@firegoby.jp
원라이너 웹서버를 모아본 @qiita
마지막으로
실제로 만들었던 프로그램에서는 CSV 공백 제거, 공부용으로 jquery로 읽어들여, 장래 열수가 늘어났을 때에 리스트에의 푸시로의 dataset 작성. 등이 들어있었습니다. 하지만 소스가 길어졌기 때문에 여기에서는 최소 구성에 그치고 다음 게시물로 돌리기로 하겠습니다.
2016-09-25 21:15 추가
낭비로 복잡한 코드 (CSV 데이터를 chart.js화, 그 2)
에 이어(긴 소스 전문)를 실었습니다.
Reference
이 문제에 관하여(CSV 데이터를 chart.js로 그래프화합니다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tabetomo/items/f1fa423bf826a1d2efb8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(CSV 데이터를 chart.js로 그래프화합니다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tabetomo/items/f1fa423bf826a1d2efb8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
