분류 javascript

JSCharting 라이브러리를 사용하여 첫 번째 JavaScript 차트를 만드는 방법

컨텐츠 정보

  • 조회 225 (작성일 )

본문

초급 JavaScript 개발자로 시작할 때는 흥미로운 프로젝트를 추구하는 것이 중요하다고 생각합니다. 

그렇게 하면 배우면서 즐겁게 지낼 수 있으며, 자신이 좋아하는 전문 분야를 찾을 수 있을 것입니다.


https://www.freecodecamp.org/news/how-to-make-your-first-javascript-chart/ 


이 기사에서는 개인의 열정 인 프런트 엔드 데이터 시각화에 대해 소개합니다. 아마도 그것은 당신의 열정이 될 것입니다!


개발자로서 가장 보람 있는 순간은 내가 만든 결과를 보거나 경험할 수 있는 시점입니다. 

데이터에 대한 흥미로운 통찰력을 나타내는 차트 또는 고유 한 데이터 세트의 세부 정보를 탐색하는 데 도움이 되는 대화식 환경을 만드는 것이 매우 만족스럽습니다. 결과가 중요할수록 더 많은 보상을 받습니다.


그러나 프로젝트에 투입한 작업량은 반드시 성취감과 상관 관계가 있는 것은 아니라는 점을 깨달았습니다. 때로는 비교적 쉬운 경우에도 기분이 좋습니다.


시간이 지남에 따라 효율성을 높이는 데 도움이 되는 도구를 찾을 수 있으며 때로는 약간의 노력으로 산을 이동할 수 있습니다. 

데이터 시각화 필드에는 많은 차트 라이브러리와 도구가 있습니다. 

올바른 도구를 사용하면 필요한 차트 유형에 관계없이 적은 노력으로 새 차트를 만들 수 있습니다. 

개인적으로, 나는 datavis가 당신의 시간과 노력에 대한 투자에 큰 보상을 한다고 생각합니다.


이 자습서에서는 다양한 도구를 사용하여 인터넷을 통해 데이터를 가져 와서 처리하고 최신 브라우저에서 볼 수 있는 아름다운 차트를 그립니다. 

아래 링크를 클릭하여 각 단계에 대한 예제 코드를 개별적으로 다운로드하거나 GitHub에서 모두 보거나 모든 단계를 한 번에 다운로드 할 수 있습니다 (all-steps.zip).


결과 


이 학습서를 마치면 이 대화식 데이터 중심 차트를 작성하게 됩니다. 

인터넷을 통해 데이터를 가져 와서 처리하고 해당 데이터로 차트를 만드는 방법을 배웁니다. 

당신은 또한 처음부터 자신의 차트를 만들 수 있습니다.


Interactive JavaScript line chart 

대화식 JavaScript 꺾은 선형 차트


데이터를 처리하고 차트화 한 후에는 기본 범례 수정, 툴팁으로 x 축 십자선 사용 및 차트에 컨텍스트 및 기타 정보를 추가하기 위해 텍스트 주석 적용을 포함하여 차트를 조정하는 방법도 배웁니다.


도구들 


시작하려면 이 기사를 읽는 데 사용하는 것과 같은 인터넷 브라우저를 사용하십시오. 

Chrome은 훌륭한 경험을 제공하고 개발자를 위한 내장 도구를 제공하므로 Chrome을 권장합니다.


다음으로 텍스트 편집기가 필요합니다. 메모장처럼 간단한 것이 작동합니다. 그러나 VS Code와 같은 고급 코드 편집기를 사용하는 것이 좋습니다. 이는 많은 시간을 할애하는 환경이기 때문입니다. 보다 편리하고 쾌적한 코딩 환경을 제공하며 HTML5, CSS 및 JavaScript를 보다 쉽게 ​​작성할 수 있습니다. 

가장 중요한 것은 어딘가에 따옴표나 쉼표를 잊어 버린 경우 코드 편집기가 오류를 찾는 데 도움을 줄 수 있습니다.


이 기사는 웹 개발에 가장 적합한 JavaScript 코드 편집기를 선택하는 데 도움이 됩니다.


JSCharting 차트 라이브러리를 사용하여 이 차트에 대화식 기능을 자동으로 그리거나 추가합니다. 

jQuery와 같은 다른 JavaScript 라이브러리나 React 및 Angular (일반적으로 웹 사이트 프로젝트에 사용)를 포함한 프론트 엔드 플랫폼이 필요하지 않습니다.


왜 JSCharting인가? 


JSCharting은 SVG를 사용하여 다양한 유형의 차트를 그릴 수 있는 JavaScript 차트 라이브러리입니다. 

사용하기 쉽고 시작하기 때문에 이 튜토리얼에 적합합니다. 

API (응용 프로그램 프로그래밍 인터페이스, 즉 차트를 만드는 데 필요한 옵션 및 설정)는 어려운 작업을 간단하게 만들어 데이터 시각화를 실험 할 때 좋은 옵션입니다.


포함 된 브랜딩으로 JSCharting을 개인 및 상업적 용도로 무료로 사용할 수 있습니다.


몇 가지 간단한 단계를 통해 JSCharting으로 반응형 차트를 만들 수 있습니다.

  • 고유 ID를 사용하여 HTML 파일에서 <div> 태그를 정의하십시오.
  • JavaScript 파일에서 JSC.Chart()를 호출 할 때 이 ID, 데이터 및 기타 옵션을 제공하십시오.

그게 다입니다. JSC는 SVG 요소 비주얼로 이 div 태그를 채우는 전문적인 차트를 그립니다. 

차트는 추가 노력 없이도 반응형이며 대화형입니다.


자료 


NCHS (National Health Center for Health Statistics)에서 제공 한 데이터 파일을 사용하여 미국 내 남성과 여성의 예상 수명을 나열합니다.


https://data.cdc.gov/resource/w9j2-ggv5.csv에서 찾을 수 있습니다.


이 CSV 파일에는 예상 수명을 연도, 인종 및 성별별로 분류 한 데이터가 포함되어 있습니다. 

이 데이터 중 일부를 사용하여 지난 100 년 동안 단순한 남성 / 여성 추세선을 그릴 것입니다.


CSV (쉼표로 구분 된 값)는 인터넷을 통해 데이터를 전송하기 위한 훌륭한 형식입니다. 컴팩트하고 사람이 읽을 수 있으며 직접 엑셀을 열 수 있습니다.


더 이상 고민하지 말고 시작합시다.


1 단계-빈 차트 추가 


첫 번째 zip 파일에는 입력 할 수 있는 빈 시작점이 포함되어 있습니다. 길을 잃었거나 혼란스러워하거나 건너 뛰고 싶을 때는 마지막이나 각 섹션에 있는 zip 파일로 속도를 높일 수 있습니다.


모든 파일을 한 번에 다운로드하려면 대신 all-steps.zip을 참조하십시오.


step1-a.zip 


이 zip 파일에는 다음 파일이 포함되어 있습니다.


  • index.html
  • js/index.js

.html 파일은 유효한 파일로 만드는 일부 표준 코드를 제외하고 비어 있으며 .js 파일은 완전히 비어 있습니다.


첫 번째 단계는 HTML 웹 페이지 파일에 일부 스크립트를 추가하는 것입니다. 

일반적으로 사람들은 <head> 태그 안에 <script> 태그를 추가 할 것을 제안합니다. 

그러나 HTML 내용에 영향을 주는 스크립트의 경우 닫는 </ body> 태그 뒤에 추가하는 것이 좋습니다.


이 기술은 JavaScript를 실행하기 전에 모든 HTML을 DOM으로 로드 합니다. 

차트를 작성하려면 HTML을 로드 해야 합니다. DOM (Document Object Model)은 브라우저 메모리의 HTML 코드를 나타냅니다. 

HTML이 DOM에 로드되면 브라우저는 HTML을 표시 할 수 있고 JavaScript는 HTML과 상호 작용할 수 있습니다.


JSCharting 라이브러리를 HTML 파일에 추가하여 시작하십시오. 

선택한 편집기에서 index.html 파일을 여십시오. </ body> 태그 뒤에 JSCharting을 포함하도록 스크립트 태그를 추가하십시오. 

파일 하단의 결과 코드는 다음과 같아야 합니다.

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>

이 라이브러리 URL은 CDN (Content Delivery Network)을 가리킵니다. 

차트 코드를 호스팅 하며 차트 프로토 타입 및 실험을 위해 라이브러리를 HTML 페이지에 빠르게 추가하는 것이 편리합니다. 

라이브러리를 로컬로 다운로드하여 사용하거나 프로젝트에서 npm 패키지를 사용할 수도 있지만 CDN에는 추가 단계가 필요하지 않습니다.


다음으로 동일한 기술을 사용하여 빈 JavaScript 파일을 참조하는 다른 스크립트 태그를 추가하십시오. 

jscharting.js 스크립트 뒤에 다음과 같이 이 스크립트를 추가하십시오.


</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>

큰. 빈 차트를 그릴 준비가 거의 되었습니다. 

마지막으로 해야 할 일은 HTML 파일 내에 <div> 자리 표시자를 추가하여 이 차트를 그릴 위치를 정의하는 것입니다.


이 HTML 코드를 <body> 태그 안에 추가하십시오.


<body>
    <div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>

div에는 ID가 있어야 차트에 그릴 div를 지정할 수 있습니다.이 경우 id는 chartDiv입니다.


<div> 태그의 스타일 속성을 볼 수 있습니다. 

div를 창 너비의 50 %, 높이는 300 픽셀로 만듭니다. 

여백 스타일 여백 : 0 auto; div를 페이지의 가운데에 놓습니다. 

차트는 div의 크기를 채우므로 div 크기를 변경하는 것이 차트 크기를 제어하는 ​​좋은 방법입니다.


HTML 파일이 모두 설정되었습니다. index.js 파일을 열고 div id chartDiv가 포함 된 다음 코드를 작성하여 이 페이지에 빈 차트를 추가하십시오.


JSC.Chart('chartDiv', {});

브라우저에서 index.html 파일을 여십시오 (크롬과 같은 웹 브라우저로 파일을 끌어다 놓으십시오).


아직 많이 보지는 않지만 이 페이지에 작은 JSC 로고가 표시 될 수 있습니다. 

즉, 차트가 연결되어 있고 드로잉 중임을 나타냅니다.

JSCharting logo shows the chart is working 

JSCharting 로고는 차트가 작동 중임을 나타냅니다.


step1-b.zip 


2 단계-차트를 약간 재생 


테스트로 차트의 시각화를 위해 몇 가지 값을 추가해 봅시다.


index.js 파일로 돌아가서 컨텐츠를 차트에 더 많은 옵션을 추가하는 다음 코드로 바꾸십시오.


JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});

이제 index.html 페이지가 로드 된 브라우저 창을 새로 고치십시오 (F5).


Horizontal column chart with one series and two points 

하나의 계열과 두 개의 점이 있는 가로 막 대형 차트


좋은! JavaScript를 사용하여 첫 번째 차트를 만들었습니다.


차트 유형 옵션을 'horizontal column'로 설정하여 막 대형 차트를 만들었습니다. 

수직 열을 선호하는 경우 값을 'column'으로 설정하십시오. 또한 Apples and Oranges의 차트에 두 개의 점이 있는 계열을 추가했습니다.


모든 차트 데이터는 시리즈와 포인트로 구성됩니다. 시리즈는 단순히 데이터 포인트 그룹입니다. 

차트에는 하나 이상의 데이터 계열이 포함될 수 있습니다. 데이터 포인트는 x 및 y 축에 매핑되는 값으로 구성됩니다. 

포인트에는 다른 많은 설명 변수와 값이 포함될 수도 있습니다.


위의 예에는 시리즈가 하나만 포함되어 있습니다. 이제 두 계열이 있는 차트의 옵션을 살펴 보겠습니다. JavaScript 파일의 내용을 이 코드로 바꾸십시오.


JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         name:'Andy',
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 32}
         ]
      },{
         name:'Anna',
         points: [
            {x: 'Apples', y: 30},
            {x: 'Oranges', y: 22}
         ]
      }
   ]
});

브라우저 창을 새로 고치면 이 차트가 표시됩니다.


Horizontal column chart with two series 

두 개의 시리즈가 있는 가로 막 대형 차트


차트 옵션이 비슷해 보입니다. 여전히 막대 차트이지만 이번에는 시리즈 배열에 추가 개체가 있습니다. 

또한 차트에서 범례에서 식별 할 수 있도록 각 계열의 이름 속성을 추가했습니다.


레이더 차트, 영역 차트, 파이 차트, 간트 차트 또는 캘린더 히트 맵 차트와 같은 다른 차트를 만드는 데 관심이 있다면 JSCharting 예제 갤러리와 해당 차트를 만드는 데 사용되는 소스 코드 (차트 옵션)를 살펴보십시오. 

사용 가능한 예제를 복사하여 다른 차트 기능을 사용하는 방법을 빠르게 배울 수 있습니다.


step2.zip 


3 단계-데이터 준비 


CSV 데이터 형식은 정확히 – 쉼표로 구분 된 값입니다. 

파일은 행 (행)을 포함하고 각 행은 레코드 또는 항목을 나타냅니다. 

일반적으로 첫 번째 값 행에는 각 쉼표로 구분 된 값 (열)의 이름이 포함됩니다. 후속 행에는 값 자체가 포함됩니다.


name,age
chris,26
mike,34

CSV는 사람이 읽을 수 있지만 이 형식에는 변형이 있습니다. 

값에 쉼표 (예 : 우편 주소)가 포함 된 경우 형식이 그대로 작동하지 않으므로 각 값도 따옴표로 묶습니다. 

이렇게 하면 따옴표 안의 쉼표가 무시되고 값을 구분하기 위해 따옴표 이외의 쉼표 만 사용하여 형식을 계속 사용할 수 있습니다.

"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"

쉼표 대신 탭과 같은 다른 문자를 사용하여 값을 분리 할 수도 있습니다.


그러나 사소한 일로 혼란에 빠지지 마십시오. JSCharting은 이 프로세스에 도움이 되는 여러 도구를 제공하며 그 중 하나를 사용하여 CSV 파일 형식에 대한 걱정을 건너 뛰고 JSON (JavaScript Object Notation)으로 변환합니다. 

결과는 객체의 배열이 됩니다. 각 개체는 명명 된 속성이 있는 행을 나타냅니다. 

CSV 파일의 첫 번째 행은 해당 속성의 이름을 정의하는 데 사용됩니다.


이것은 우리가 관심 있는 데이터의 URL입니다 : https://data.cdc.gov/resource/w9j2-ggv5.csv 


클릭하여 Excel에서 다운로드하여 열 수 있습니다.


image-28.png 

Excel에서 열린 CSV 파일


그러나 JavaScript 코드를 사용하여 이 CSV 데이터를 실시간으로 다운로드하여 액세스합니다. 

아래 코드는 처음에는 약간 혼란스러울 수 있지만 짧고 재사용하여 프로그래밍 방식으로 인터넷을 통해 CSV, 텍스트 또는 JSON 파일을 가져올 수 있습니다. 이전 AJAX 기술과 비슷하지만 사용하기가 훨씬 간단합니다.


다시 한 번 index.js 파일의 내용을 다음으로 바꾸십시오.


fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
	csvToSeries(text);
   })
   .catch(function (error) {
      //Something went wrong
      console.log(error);
   });

function csvToSeries(text) {
   console.log(text);
}

왜 그렇게 복잡한가? 파일을 요청할 때 즉시 사용 가능하지 않기 때문입니다. 지연이 있으며 파일이 도착할 때까지 기다려야 합니다. 따라서 먼저 fetch()를 사용하여 다른 웹 사이트에서 파일을 요청하십시오.


fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')

그러면 then (...) 인수 함수 내부의 코드가 도착하면 응답과 함께 호출됩니다. 이 함수는 응답을 텍스트로 변환하여 반환하여 결과를 다음 then () 인수 함수로 전달합니다.


.then(function (response) {
	return response.text();
})

다음 then(...) 인수 함수는 csvToSeries() 함수를 호출하고 텍스트를 인수로 전달합니다.

.then(function (text) {
	csvToSeries(text);
})

catch() 함수에서 문제가 발생했을 때 수행 할 작업을 지정할 수 있습니다. 예를 들어 인터넷이 다운되었거나 URL이 올바르지 않을 수 있습니다.


.catch(function (error) {
	//Something went wrong
	console.log(error);
});

이 경우 오류가 콘솔로 전송됩니다.


csvToSeries() 함수에서 검사를 위해 이 텍스트를 콘솔에 전달합니다.


function csvToSeries(text) {
   console.log(text);
}

💡 참고 : Internet Explorer 11에서는 기본 fetch() 함수가 지원되지 않습니다. 이 브라우저도 지원하려면 JSCharting과 함께 제공되는 JSC.fetch() 함수를 사용하십시오. 동일한 기능을 제공하지만 IE11에 대한 추가 지원을 추가합니다.


index.html 파일을 브라우저 창으로 드래그하거나 이미 열려있는 경우 페이지를 새로 고치십시오. 

F12를 누르십시오. 크롬 브라우저의 DevTools 창이 열립니다. 

기본적으로 DevTools 창의 하단에는 콘솔 출력이 표시됩니다. 다음과 같은 코드를 실행할 때 텍스트가 전송되는 위치입니다.

console.log(text);

C9pr4DISX6SwVwUdrSUz8s54gIuNgseApHISaR-C0HXkU-8OKaup09xhIeWjn7MvzWraT4uIEYPJU63ZVopGAHSshqxE64a6m8mHQlPiTVZUV0mAh4_p_3vBvSxWnqM0B9Vt3kLP 

콘솔 창 출력


이 콘솔 창에 코드를 붙여 넣거나 작성하여 실행할 수도 있습니다. 위의 전체 코드 스니펫을 콘솔 창 (> 문자 옆)에 붙여 넣고 Enter 키를 누릅니다. 콘솔 창 출력에서 ​​동일한 결과를 얻습니다. 이는 코드 줄을 테스트하고 실험하는 데 유용 할 수 있습니다.


step3-a.zip 


이 시점에서 인터넷을 통해 CSV 파일의 텍스트를 검색하여 콘솔로 전송하여 작동하는지 확인했습니다. 이제 작업을 시작할 수 있습니다.


내부에 대한 정보를 얻기 위해 이 데이터 파일을 살펴 보겠습니다.

https://data.cdc.gov/resource/w9j2-ggv5.csv 


Excel을 사용하여 연도 열별로 행을 정렬하여 단일 연도의 데이터 행을 분석했습니다.


image-27.png 

연도별로 정렬 된 CSV 데이터.


매년 인종과 성별에 따른 데이터가 포함 된 9 개의 행이 있습니다. 우리는 매년 모든 인종의 강조된 남성 및 여성 가치에만 관심이 있습니다. 강조 표시된 행을 기준으로 두 개의 계열을 만듭니다. 여성을 위한 시리즈와 남성을 위한 시리즈.


이제 어떤 일이 발생해야 하는지 알았으니 시작하겠습니다.


먼저 JSC.csv2Json() 함수를 사용하여 텍스트를 JSON 형식으로 변환하고 콘솔에 전달하여 기능을 살펴 보겠습니다.


다음 코드로 csvToSeries() 함수를 업데이트하십시오.

function csvToSeries(text) {
   let dataAsJson = JSC.csv2Json(text);
   console.log(dataAsJson)
}

업데이트 된 콘솔 출력을 보려면 브라우저를 새로 고치십시오.


image-29.png 

JSC.csv2Json() 유틸리티 함수를 사용하여 JSON으로 변환 된 CSV 데이터


콘솔은 1062 레코드의 배열을 보여줍니다. 그리고 이것은 다음 기록 중 하나입니다.


{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

💡 참고 : 콘솔은 검사 할 배열 및 개체를 표시 할 수 있으며 콘솔에서 섹션을 확장 및 축소하여 세부 정보를 탐색 할 수 있습니다.


속성 이름 average_life_expectancy는 약간 길지만 사용해야 합니다. 두 번 이상 입력하지 않으려면 이 이름을 저장할 상수 변수를 정의하십시오. 이 속성을 사용해야 하는 경우 변수 이름 lifeExp를 작성하면 됩니다. row.average_life_expectancy 대신이 행 [lifeExp]과 같습니다.


csvToSeries() 함수의 맨 위에 이 줄을 추가하십시오.


function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	...

간단한 바닐라 JavaScript를 사용하여 이 데이터를 처리 할 수 ​​있습니다. 우리가 원하는 최종 결과는 각 포인트에 대한 연도 및 예상 수명을 포함하는 데이터 포인트가 포함 된 두 시리즈입니다.


다음 코드로 csvToSeries()를 업데이트하십시오.


function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		console.log(row);
	});
}

그것은 남성과 여성 데이터 포인트에 대한 배열을 정의합니다. 그런 다음 배열 dataAsJson.forEach() 함수를 호출하여 콜백 함수 (row){...} 함수를 인수로 전달합니다. forEach() 함수는 dataAsJson 배열의 각 항목에 대해 콜백 함수를 실행합니다. 지금은 콜백 함수가 발생하는 각 행에서 console.log(row)를 호출합니다.


브라우저를 새로 고치고 콘솔 출력을 검사하십시오.


image-30.png 

콜백 함수가 발생한 각 행 객체


원하는 데이터를 필터링하고 콘솔 창에 결과를 기록하는 로직을 추가해 보겠습니다. csvToSeries() 함수를 이 코드로 바꾸십시오.


function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		if (row.race === 'All Races') {
			if (row.sex === 'Male') {
				male.push({x: row.year, y: row[lifeExp]});
			} else if (row.sex === 'Female') {
				female.push({x: row.year, y: row[lifeExp]});
			}
		}
	});
    console.log([male, female]);
}

콜백 함수 내에서 행이 관심 있는지 여부를 결정하고 사용하는지 여부를 결정하십시오.


if (row.race === 'All Races') {
	if (row.sex === 'Male') {
		//add data to male array
		male.push({x: row.year, y: row[lifeExp]});
	} else if (row.sex === 'Female') {
		//add data to female array
		female.push({x: row.year, y: row[lifeExp]});
	}
}

로직은 row.race 값이 'All Races'와 같은지 확인합니다. 그렇다면 row.sex 속성이 'Male'또는 'Female'과 같은지 확인합니다. 행이 둘 중 하나와 같으면 데이터를 male 또는 female 배열에 {x, y} 포인트 객체로 추가합니다. 위에서 정의한 lifeExp 변수를 사용하면 이 코드를 단축 할 수 있습니다.


마지막으로 console.log ([male, female])을 사용하여 검사를 위해 male 및 female 변수를 콘솔에 전달하고 코드가 예상대로 작동하는지 확인했습니다.


브라우저를 새로 고친 후 콘솔에 결과가 1900 년에서 2017 년까지 118 개의 데이터 포인트가 있는 두 개의 어레이가 표시됩니다.


V3yi_ZyqpoOMvn8jr1Tb31obS1WPHbgJ8p1LkPirFMLu8rjmzUs5-CgVCvtsLLnXscGO7HxR8_IM02_Q1twFPRNa1ll5JCCOoQbuK_S0hxqA7IZNoAqskksO62nXXRoSedjwUmzg 

남성과 여성의 포인트 배열


마지막으로 결과를 콘솔로 전달하는 대신 차트가 직접 사용할 수 있도록 두 데이터 계열을 이러한 데이터 요소로 감싸서 반환합니다.


csvToSeries() 함수 끝에 이 코드를 추가하십시오.


return [
   {name: 'Male', points: male},
   {name: 'Female', points: female}
];

리턴 된 값이 콘솔로 전송 된 경우 이 결과가 생성됩니다.


_xlnsylk8kbv1u9-Fw4K0dnmJ7J_UBzhbhrWT8j48S4xtr04gYezHIITd_cNWQ5ZvJvi4MPdqi_IIat-JSfmRiOZT7jDzco5JYSstOzec67OxAQ-LCB7zuyqm20gxV8FYEm1XL0d 

차트가 직접 소비 할 수 있는 2 개의 계열 개체


보시다시피 행 필터링 논리는 매우 간단하며 이 데이터 세트에서 다른 세부 정보를 얻도록 조정할 수 있습니다.


JSCharting 유틸리티를 사용하여 CSV 파일을 처리하는 방법에 대한 자세한 내용은 이 자습서를 참조하십시오. 보다 고급 데이터 처리가 가능하면 JSC.nest() 유틸리티를 사용하여 코드를 거의 사용하지 않고 JSON 데이터에서 시리즈 및 포인트를 작성할 수 있습니다.


step3-b.zip 


4 단계-모두 정리 


데이터 처리 섹션은 가장 어려운 단계였지만 이것만으로도 CSV 파일에서 관심 있는 데이터를 조작하고 추출 할 수 있습니다. 

이 모든 것이 함께 모여서 성취감을 느낄 수 있는 곳입니다.


index.js 파일 끝에 renderChart() 함수를 추가하여 시작하십시오. 시리즈 데이터를 이 함수에 인수로 전달합니다.


function renderChart(series){
   JSC.Chart('chartDiv', {
      series: series
   });
}

csvToSeries()를 호출하는 then() 인수 함수에서 시리즈 결과를 renderChart() 함수에 전달하여 브라우저에서 그 결과를 확인하십시오.


.then(function (text) {
	let series = csvToSeries(text);
	renderChart(series);
})

step4-a.zip 


이제 브라우저를 새로 고칩니다. 이전 섹션에서 처리 한 CSV 데이터를 사용하는 이 차트가 표시됩니다. 😆


Line chart showing filtered CSV data 

필터링 된 CSV 데이터를 표시하는 선 차트


우와, 1918 년에 무슨 일이 있었나요? 기대 수명이 크게 줄었습니다. 

Wikipedia에 따르면 H1N1 바이러스와 관련된 독감 전염병이 전 세계 인구의 일부를 제거했다고 합니다. 

이 불행한 이벤트는 데이터를 시각화하여 일반적으로 숫자를 보는 것만으로는 얻을 수 없는 통찰력을 제공하는 방법을 보여줍니다.


기본 선 시리즈 유형을 사용하여 차트를 만들었으나 모양이 좋아 보이지만 몇 가지를 조정하고 조정하여 더 향상 시킬 수 있습니다.


먼저 상단에 제목을 추가하여 뷰어가 보고 있는 것을 설명하고 차트 하단에 주석을 추가하여 데이터 소스를 표시합니다. 

JSC.Chart() 생성자 함수를 업데이트하여 다음 옵션을 전달하십시오.


function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
		series: series
	});
}

브라우저를 새로 고치면 업데이트 된 차트를 볼 수 있습니다.


Line chart with title and annotation for attribution 

기여에 대한 제목과 주석이 있는 꺾은 선형 차트


레이블 텍스트 및 위치 설정으로 주석을 추가했습니다. 

제목에 다른 주석을 사용할 수도 있지만 이 예제에서는 제목 레이블을 사용하는 것이 더 쉬웠습니다.


'top right'또는 'inside bottom right'와 같은 값을 사용하여 주석 위치를 쉽게 제어 할 수 있습니다. 'inside'값은 주석이 데이터가 그려지는 차트 영역 내에 배치됨을 의미합니다. 이 상자 위치 차트 예는 모든 위치 설정 옵션을 보여줍니다.


범례는 각 시리즈의 포인트 값의 합계를 보여 주지만이 데이터 세트에는 중요하지 않습니다. 이 설정을 사용하여 범례 열을 줄여 아이콘과 시리즈 이름 만 표시 할 수 있습니다.


legend_template: '%icon,%name'

그러나 실제로 전설을 사용할 필요는 없습니다. 

선 자체에 레이블을 붙이는 것이 더 깨끗합니다. 

범례를 비활성화하고 다음 차트 옵션을 사용하여 각 선 계열의 마지막 지점에 계열 이름을 쓰도록 차트에 지시 할 수 있습니다. 


legend_visible: false,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',

Line chart using point labels instead of a legend 

범례 대신 포인트 레이블을 사용하는 꺾은 선형 차트 


'% seriesname'토큰은 포인트 세부 사항 및 계산을 표시하기 위해 포인트 레이블 텍스트에서 사용할 수 있는 많은 포인트 관련 토큰 중 하나입니다. 


마지막으로, x 축 십자형 결합 툴팁을 사용하여 특정 연도의 남성 및 여성 수명을 보여 드리겠습니다. 

휴대 기기에서는 차트를 탭하여 십자선 툴팁을 볼 수 있습니다. 

PC를 사용할 때 마우스 포인터로 차트를 가리키면 툴팁이 표시됩니다.


xAxis_crosshair_enabled: true,

당신은 궁금 할 것입니다, 속성 이름에 있는 모든 밑줄은 무엇입니까? 이것은 실제 속성 이름이 아닙니다. 쓰는 짧은 방법입니다.


xAxis: {crosshair: {enabled: true}},

밑줄로 설정을 지정하는 것이 더 편리 할 수 ​​있으며 JSCharting은 의미를 이해합니다.


기본 툴팁 텍스트는 명확하지만 약간 맞춤 설정하여 직접 만들 수 있습니다.


image-60.png 

기본 결합 된 툴팁


십자형 툴팁은 교차하는 각 점에 대한 정보를 표시하므로 툴팁 텍스트는 점 옵션 내에서 정의됩니다. 

defaultPoint 속성은 모든 포인트가 자동으로 상속 할 포인트 옵션을 정의합니다.


defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
image-61.png

맞춤형 툴팁


이 기능에 대한 자세한 내용은 십자선 및 결합 된 툴팁 자습서를 확인하십시오.


이 옵션을 모두 적용하면 코드가 다음 스니펫과 유사하게 됩니다. 전체 renderChart() 함수를 이 코드로 바꾸십시오.


function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
        legend_visible: false,
		defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
		defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
		xAxis_crosshair_enabled: true,
		series: series
	});
}

브라우저 창을 한 번 더 새로 고치십시오.


Line chart with crosshairs and customized combined tooltips 

십자선 및 사용자 정의 된 툴팁이 있는 선 차트


먼저 네이티브 JavaScript를 사용하여 CSV 데이터를 가져 왔습니다. 

그런 다음 JSON 형식으로 변환하고 데이터를 두 시리즈로 필터링 했습니다. 

이 시리즈를 사용하면 JSCharting을 사용하여 멋진 대화 형 꺾은 선형 차트를 만들고 전문적으로 보이도록 구성했습니다.


특정 요구에 맞게 차트를 추가로 사용자 정의하고 조정할 수 있습니다. 

JSCharting 학습서 섹션을 방문하여 특정 주제에 대해 자세히 알아 보거나 예제 갤러리에서 작성하려는 것과 유사한 차트를 찾아서 복사하여 데이터 시각화 여행을 계속하십시오.


JSCharting 관련 문제가 발생하면 언제든지 지원 팀에 문의하십시오. 그들은 당신을 안내하거나 당신이 발생할 수있는 문제를 해결하는 데 도움이 될 것입니다.


step4-b.zip 


보너스 챌린지 


해당 CSV 파일에서 사용 가능한 모든 데이터를 사용하지 않았습니다. 재미와 연습을 위해 실험 해 봅시다.


배운 것을 사용하여 이 차트를 만듭니다. 


Challenge: Replicate this chart on your own 

도전 과제 :이 차트를 직접 복제


이 zip 파일에는 다음과 같은 답변이 포함되어 있습니다.


step5-bonus.zip 


이 데이터로 만들 수 있는 다른 차트를 생각할 수 있습니까? 실험을 계속하고 매 순간을 즐기십시오!