jQuery의 드릴다운 FusionChart에 대한 자습서
게시 됨: 2022-03-11데이터를 시각화하면 더 쉽게 읽을 수 있습니다.
데이터 분석을 처리할 때 대부분의 회사는 MS Excel 또는 Google 스프레드시트에 의존합니다. 이러한 도구는 강력한 도구이지만 추세를 파악하기 어렵고 스프레드시트 데이터의 큰 행에서 의미가 없습니다. 이러한 방식으로 제공된 데이터를 처리하는 것은 그다지 흥미롭지 않지만 해당 데이터에 시각화를 추가하면 관리가 더 쉬워지며 이것이 오늘 튜토리얼의 주제인 jQuery를 사용하여 대화형 차트를 만드는 것입니다.
이 프로젝트에 FusionCharts의 JavaScript 차트 라이브러리를 사용할 것입니다. 이 라이브러리는 90개 이상의 차트로 구성된 대규모 라이브러리를 제공하고 모든 브라우저와 호환되며 작업하기가 매우 쉽기 때문입니다. 또한 작업을 더 쉽게 만들어주는 jQuery 전용 플러그인을 제공합니다.
먼저 FusionCharts의 핵심 JavaScript 라이브러리와 jQuery 차트 플러그인을 사용하여 기본 차트를 만든 다음 드릴다운 기능을 추가하겠습니다. 드릴다운을 사용하면 데이터 플롯을 클릭하여 한 차트에서 다른 차트로 이동할 수 있습니다.
'데이터 플롯'이라는 용어는 상황에 따라 다릅니다. 세로 막대형 차트의 기둥, 꺾은선형 차트의 선, 원형 차트의 원형 조각을 나타냅니다. 상위 차트에서 데이터 플롯을 클릭하면 하위 차트가 표시되며 상대 데이터를 한 단계 더 깊이 표시합니다.
FusionChart 이해하기
튜토리얼을 시작하기 전에 FusionCharts의 기본 구조를 살펴보겠습니다. 모든 차트는 다음과 같은 핵심 요소로 구성됩니다.
- 캡션: 차트의 제목입니다. 차트에 표시되는 내용을 설명합니다.
- 하위 캡션: 추가 차트 정보를 지정하는 캡션 아래의 텍스트는 종종 데이터가 수집된 기간을 나타냅니다.
- 범례: 차트의 각 데이터 플롯에 대한 기호를 표시합니다. 특정 플롯은 해당 범례 아이콘을 클릭하여 활성화하거나 비활성화할 수 있습니다.
- 데이터 플롯: 차트의 데이터 표현입니다. 데이터 플롯은 세로 막대형 차트의 열, 꺾은선형 차트의 선 또는 원형 차트의 원형 조각일 수 있습니다.
- 도구 설명: 특정 데이터 플롯에 대한 추가 정보를 전달하는 데 사용되는 데이터 플롯 위로 마우스를 가져갈 때 나타나는 텍스트입니다.
드릴다운 차트 만들기
시작하기 전에 이 튜토리얼에서 만들 차트의 스크린샷이 있습니다. 여기에서 JSFiddle을 보거나 내 GitHub 리포지토리에서 프로젝트의 전체 소스 코드에 액세스할 수 있습니다.
드릴다운 차트를 만드는 과정을 5단계로 나누었으므로 시작하겠습니다.
1단계: JavaScript 파일 포함 및 차트 컨테이너 생성
먼저 <script> 태그를 사용하여 프로젝트가 의존하는 모든 JS 파일을 포함해야 합니다. 페이지가 이미 존재하지 않는 경우 빈 HTML 문서를 만들고 <head> 섹션에 아래 파일을 포함하세요. 이제 다음 4개의 파일이 필요합니다.
- 축소된 jQuery
- FusionCharts의 기본 JS 라이브러리(
fusioncharts.js및fusioncharts.charts.js모두 포함) - FusionCharts의 jQuery 플러그인
이제 <head> 섹션이 다음과 같이 보일 것입니다.
<!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script> 이제 모든 종속성이 포함되었으므로 차트에 대한 컨테이너 <div> 를 만들고 다음 HTML 코드를 사용하여 페이지에 포함할 차례입니다.
<div>drill-down chart will load here</div> 이제 코드 내에서 jQuery의 $ 선택기를 사용하여 선택할 수 있습니다.
$("#drill-down-chart") 참고: 페이지에 차트가 두 개 이상 있는 경우 고유 id 를 가진 각 차트에 대해 별도의 컨테이너가 필요합니다.
2단계: 데이터 가져오기 및 구조화
FusionCharts는 JSON 및 XML 형식의 데이터를 모두 허용하지만 웹 앱 간의 데이터 교환을 위한 표준 형식이 되었기 때문에 JSON을 사용하기로 결정했습니다. 기본 차트의 JSON 데이터 배열에는 각 데이터 플롯에 대한 개체가 포함되어 있으며 각 데이터 플롯 개체 내부에 해당 레이블과 값을 정의합니다. 그 구조는 다음과 같습니다.
"data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ] 드릴다운 차트를 그릴수록 JSON이 더 복잡해집니다. 상위 차트와 하위 차트 간의 링크에는 데이터 배열의 각 개체 내부에 하나 이상의 key - value 쌍이 필요합니다. 새 키(당연히 link 라고 함)에는 상위 데이터 플롯을 클릭할 때 얻을 하위 차트의 ID가 포함됩니다. 자식 차트 id 를 정의하는 형식은 newchart-dataFormat-childId 입니다. 우리는 JSON을 사용하고 있기 때문에 우리가 연결하는 모든 것이 newchart-json-childId 처럼 보일 것이라는 것을 알고 있습니다. 다음은 차트에 대해 정의하는 방법입니다.
"data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]3단계: 차트 데이터 삽입
데이터가 준비되면 jQuery 플러그인에서 제공하는 insertFusionCharts 메서드를 사용하여 페이지에 차트를 삽입할 차례입니다.
$("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })위의 코드 스니펫을 분해해 보겠습니다.
-
type은 우리가 그리는 상위 차트의 유형을 정의합니다. 이 경우column2d. FusionCharts 라이브러리의 모든 차트에는 고유한 별칭이 있습니다. FusionCharts의 차트 목록 페이지에서 플롯하려는 차트의 별칭을 찾을 수 있습니다. -
id는 차트를 포함하는<div>요소의 ID와 혼동되지 않도록 차트의 고유 ID를 설정합니다. 차트의id는 이벤트 핸들러를 적용하고 메소드를 호출하기 위한 차트를 선택하는 데 사용됩니다. 우리는 이것을 5단계에서 사용할 것입니다. -
width와height차트의 크기를 픽셀 또는 백분율로 설정합니다. 100% 너비는 차트가 전체 컨테이너 너비를 차지하도록 합니다. -
dataFormat속성을 사용하여 데이터 형식을 정의합니다. 이 예에서는 JSON을 사용하고 있지만 XML URL과 같은 다른 허용 가능한 데이터 형식도 있습니다. 데이터 형식에 대한 자세한 내용은 FusionCharts의 공식 문서 페이지를 참조하십시오. -
dataSource에는 차트의 실제 내용이 포함되어 있고 그 안의chart개체에는 캡션 및 하위 캡션과 같은 차트의 구성 옵션이 포함되어 있습니다.data배열은 2단계에서 만들었기 때문에 친숙해 보여야 하고(플로팅할 데이터가 포함되어 있음)linkedData에는 자식 차트(부모 차트에서 데이터 플롯을 클릭한 후 표시되는 차트)에 대한 내용이 포함되어 있습니다.
4단계: 하위 차트에 대한 연결된 데이터 배열 만들기
이제 상위 차트를 정의했으므로 상위 차트를 생성하는 것과 매우 유사한 프로세스인 각 데이터 플롯에 대한 하위 차트를 생성할 차례입니다. 'insertFusionCharts' 메소드에서 생성된 linkedData 배열은 각 자식 차트에 대해 별도의 개체를 정의합니다. 첫 번째 자식 차트의 데이터는 다음과 같습니다.
"linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts id 는 2단계에서 정의한 개별 자식 차트의 ID입니다. linkedChart 는 해당 차트의 실제 내용을 포함한다는 점에서 3단계의 dataSource 와 유사합니다. 차트 개체 내부에 들어가는 다른 속성이 많이 있습니다. 이에 대해서는 나중에 "차트 속성을 사용하여 디자인 개선" 섹션에서 자세히 설명합니다.
5단계: 사용자 지정 드릴다운 구성
다양한 차트 유형
지금까지 샘플 코드에는 동일한 차트 유형을 공유하는 상위 및 하위 차트가 있습니다. 다른 차트 유형(예: 열에서 원형으로)으로 드릴다운하려면 fusionchartsrendered 이벤트를 바인딩하면 됩니다.
$('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); }); 위의 코드에서 fusionchartsrendered 이벤트는 모든 자식 차트의 유형과 오버레이 버튼 옵션을 정의하는 configureLink 메서드를 호출합니다. 각 하위 차트에 대해 별도의 차트 유형을 지정할 수도 있습니다. configureLink 메소드에는 많은 옵션이 있으므로 FusionCharts에서 API 참조 문서를 검토하는 것이 유용할 수 있습니다.
다른 div에서 차트 렌더링하기
당신이 할 수 있는 또 다른 멋진 일은 자식 차트를 부모와 같은 컨테이너가 아닌 다른 컨테이너에 렌더링하는 것입니다. 이를 위해 부모 차트 컨테이너 뒤에 별도의 HTML <div> 컨테이너를 정의하고 아래와 같이 id를 renderAt 속성에 전달합니다.
$('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); }); renderAt 속성에 주어진 값은 자식 차트가 렌더링될 <div> 의 ID를 지정합니다( chart-container2 ).
차트 속성으로 디자인 개선하기
이 튜토리얼을 따라하면 기능 차트를 얻을 수 있지만 그대로 두면 다소 보기 흉할 것입니다. 보다 매력적인 프레젠테이션을 위해서는 외형적인 "차트 속성"을 사용해야 합니다. 차트 속성은 chart 개체 내에서 정의되며 렌더링 옵션을 사용자 지정하는 데 사용됩니다. 다음과 같은 구성 가능한 주요 속성을 검토할 때 FusionCharts 설명 그래픽을 참조하는 것이 유용할 수 있습니다.
-
paletteColors색상은 데이터 플롯의 색상을 정의합니다. 여기에 단일 색상을 지정하면 모든 열이 해당 색상이 됩니다. 여러 색상을 지정하면 첫 번째 열에 첫 번째 값이 지정되고 두 번째 열에 두 번째 값이 지정되는 식입니다. -
plotSpacePercent는 열 사이의 공간을 제어합니다. 기본값은 20(값은 int이지만 단위는 백분율)이며 허용 범위는 0-80입니다. 값이 0이면 열이 뭉쳐지고 서로 달라붙게 됩니다. -
baseFont는 차트의 글꼴 패밀리를 정의합니다. 원하는 글꼴을 사용할 수 있습니다. 내 차트에서 Google의 Open Sans를 사용했습니다. 차트에서 사용하려면 HTML 페이지에 외부 글꼴 파일을 포함하기만 하면 됩니다. -
plotToolText를 사용하면 도구 설명을 사용자 지정할 수 있습니다.$label및 *$dataValue와 같은 매크로를 사용하여<div>내부에서 특정 데이터 플롯에 대한 특정 정보를 표시한 다음 인라인 CSS를 사용하여 해당<div>에 스타일을 지정할 수 있습니다. 다음은 예제에서 수행한 작업입니다.
"plotToolText": "<div>$label: $dataValue</div>"-
theme를 사용하면 다양한 차트 속성으로 차트 개체를 복잡하게 만드는 대신 다른 파일에서 차트 속성을 정의하고 여기에서 한 번 적용할 수 있습니다. 이 튜토리얼의 테마 파일인toptal.js는 프로젝트의 GitHub 리포지토리에 있는 JS 폴더에서 찾을 수 있습니다.
그것이 내가 다루려는 전부이지만 차트에는 100가지가 넘는 속성이 있으므로 더 자세히 알아보려면 FusionCharts의 차트 속성 페이지를 방문하여 특정 차트 유형을 검색하십시오.
더 많은 FusionCharts 및 jQuery 리소스
jQuery를 사용하여 드릴다운 차트를 만들 때 가장 중요한 요소에 대해 설명했지만 직접 수행하려고 할 때 약간의 도움이 필요할 수 있습니다. 다음은 몇 가지 추가 리소스입니다.
- jQuery 차트 플러그인: 영감을 얻으려면 공식 jQuery 차트 플러그인 페이지를 방문하여 몇 가지 라이브 예제를 확인하십시오.
- 문서: 무언가를 알아낼 수 없다면 문서를 가장 먼저 살펴봐야 합니다. 다음은 jQuery 플러그인 및 드릴다운 차트(연결된 차트라고도 함)에 대한 편리한 링크입니다.
- 데모: 모든 차트 라이브러리는 기능을 보여주기 위해 라이브 샘플을 제공하며 FusionChart도 다르지 않습니다. 아이디어가 필요한 경우 전체 소스 코드와 함께 800개 이상의 라이브 샘플이 있는 데모 갤러리로 이동하십시오. 당신이 만들려고 하는 것이 무엇이든 이미 사용할 수 있는 좋은 기회가 있습니다. 처음부터 시작할 필요가 없습니다. 바이올린을 포크하고 거기에서 진행하십시오!
- 추가 확장: 바닐라 JavaScript 또는 jQuery를 사용하지 않는 경우 이 페이지에서 FusionCharts에서 제공하는 더 많은 플러그인 및 래퍼를 탐색할 수 있습니다. Angular, React, Java, ASP.NET 등과 같은 다양한 라이브러리 및 프레임워크를 위한 전용 플러그인이 있습니다.
추신: 저는 아래 댓글 섹션에서 어울리며 제 기사에 대해 궁금한 점이 있으면 언제든지 게시해 주세요. 기꺼이 도와드리겠습니다!