Google 시트의 데이터를 사용하는 대화식 JavaScript 차트-JS 튜토리얼-php.cn

Google 시트의 데이터를 사용하는 대화식 JavaScript 차트 키 테이크 아웃

대화식 JavaScript 차트는 Google 시트의 데이터를 사용하여 생성 할 수 있으며 스프레드 시트 데이터를 변경할 때마다 동적 업데이트를 제공합니다. 프로세스에는 Google 시트에서 데이터를 JSON으로 내보내고 AJAX를 통해이 데이터를 가져오고, 필요한 형식과 일치하도록 데이터를 재구성하고, FusionCharts와 같은 도구로 차트를 작성하고, 특정 요구에 맞게 차트를 사용자 정의합니다. > FusionCharts는 JSON 데이터를 레이블 및 값 키를 포함하는 객체 배열로 받아들이고 차트는 유형, 높이, 너비, 레이블 및 데이터 소스 측면에서 사용자 정의 할 수 있습니다. Google 시트는 편리하고 액세스 가능한 데이터 소스이지만 다른 소스는 JavaScript 차트를 작성하는 데 사용될 수 있으며 폴링 메커니즘으로 데이터를 실시간으로 업데이트 할 수 있습니다.

.

이 기사는 Jeff Smith가 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! 내 친구 Jenny를 만나십시오. 그녀는 최근 웹 사이트를 코딩하기 시작했습니다. 그녀는 그녀의 직업을 사랑했고, 매우 쉬운 고객이 아니라는 명성을 가진 Steve를 만나기 전까지는 매우 행복했습니다.

Steve는 스프레드 시트에 많은 데이터를 가지고 있었고 그의 웹 사이트에이를 표시하고 싶었습니다. 우리 친구 (이제 Jenny도 당신의 친구이기도합니다!)는 Steve가 차트를 Excel로 만들어 웹 사이트에 이미지로 업로드 할 것을 제안했습니다. 그러나 스티브는 스티브이기 때문에 차트가 대화식이되기를 원했습니다. 뿐만 아니라, 그는 스프레드 시트의 데이터를 변경할 때마다 차트가 업데이트되기를 원했습니다.

. Jenny는이 문제를 해결하는 방법을 몰랐기 때문에 그녀는 나에게 왔습니다. 그리고 좋은 친구가되어, 나는 그녀 에게이 조언을 주었다 :

먼저 고객에게 고객에게 데이터를 Google 시트로 옮기도록 요청하십시오 (요즘 멋진 사람들이하고있는 모든 일이기 때문에). 그런 다음 대화식 JavaScript 차트 및 동적 업데이트 등 필요한 기능을 쉽게 구현할 수 있습니다. 그녀의 의뢰인은 (운 좋게!) 동의했고 Jenny와 나는 솔루션의 나머지 부분을 코딩했습니다. 하지만 어떻게? 글쎄, 그것이이 튜토리얼이 당신에게 가르 칠 것입니다.

나는이 튜토리얼을 5 개의 팔로우하기 쉬운 단계로 나누었다 :

Google 시트에서 데이터 내보내기 ajax 를 통해 Google 시트에서 JSON을 가져 오십시오 데이터 구조 조정 FusionCharts와 함께 차트 생성 차트 사용자 정의

더 이상 고민하지 않고 다이빙을합시다! > Google 시트 데이터를 JSON 로 내보내십시오 데이터를 내보내는 방법을 탐구하기 전에 먼저 시트를 만들어 봅시다. Google 계정이 있다고 가정하면 Google Sheets 페이지로 이동하여

를 시작하여 새 스프레드 시트 버튼을 시작할 수 있습니다. 열리는 스프레드 시트에서 두 개의 열을 만듭니다. 그런 다음 새로 생성 된 시트를 일부 데이터로 채 웁니다. 나는 여기에서 내 것을 가져 갔다 : 세계에서 가장 높은 수당 배우 2015.

<see> 보시다시피, 왼쪽 열에는 차트에 대한 레이블이 포함되어 있으며 오른쪽 값은 해당 레이블에 해당합니다. 집에서 따라 오는 분들을 위해서는이 시트의 사본을 여기에서 잡을 수 있습니다 ( 파일 > 로 이동 ). <in> Google 시트에서 사용 가능한 데이터는 JSON, XML 등과 같은 여러 형식으로 내보낼 수 있으며 해당 형식 중 하나로 내보내면 웹을 통해 쉽게 액세스 할 수 있습니다. </in></see>

. 웹에 문서를 열려면 다음 문서 설정을 변경해야합니다.

문서 공유를 웹에서 공개 또는 를 가진 사람으로 설정하십시오. 이를 달성하려면 오른쪽 상단에있는 공유 버튼을 클릭 한 다음 팝업의 오른쪽 하단에 나타나는 advanced

옵션을 클릭하십시오. 문서를 웹에 게시하십시오. 이 옵션은 파일 >

웹에 게시 할 수 있습니다.

이 두 가지 변경 사항을 사용하면 문서의 데이터는 https://spreadsheets.google.com/feeds/list/spreadsheet/od6/public/basic?alt=json 를 통해 JSON 형식으로 액세스 할 수 있습니다. 스프레드 시트를 Google 시트의 ID로 바꿔야합니다.이 경우 1aoz_gcpyoeimmnd1n_meynop8tj0fcxpp1aouhpwzo입니다. 여기에서 결과를 볼 수 있습니다.

jQuery를 사용하여 Google 시트에서 JSON을 가져 오기 우리는 jQuery 's get () 메소드를 사용하여 Google 시트의 데이터를 가져옵니다. 그림과 같이 CDN의 jQuery를 포함시킬 수 있습니다

태그가 추가 된 경우, 우리가 만든 스프레드 시트 URL에서 $ .get을 호출하십시오.

위의 jQuery 코드는 Google Sheets URL에 AJAX 요청을 만들고 데이터를 성공적으로 가져 오면 성공 기능을 호출합니다. 이 기능은 서버에서 콘솔로 반환 된 데이터를 기록합니다. 나는 당신 이이 대본을 실행하고 반환 된 것을 정확하게 검토하기 위해 잠시 시간을 내도록 권장합니다. . 데이터 구조 조정 Google 시트의 JSON 데이터는 시각화 라이브러리에서 수락 한 데이터 형식과 일치하도록 약간 재구성되어야합니다. 이 튜토리얼에는 FusionCharts를 사용합니다 FusionCharts는 JSON 데이터를 레이블 및 값 키를 포함하는 객체 배열로 받아들입니다. 이것은 다음과 같습니다. 이를 달성하려면 이전에 정의한 jQuery get 함수의 성공 콜백에서 다음 코드를 실행해야합니다. 우리가 여기서하고있는 일은 각 Google 시트 데이터 객체를 응답하여 반복하는 것입니다. 그런 다음 차트에서 사용할 새로운 배열 파르 세드 다타에 저장하고 있습니다. 라벨은 제목으로 제공됩니다. $ t 키는 컨텐츠에서 사용할 수 있습니다. $ t 데이터 객체의 키. 값에는 시트 열 이름이 포함되어 있지 않으므로 필요하지 않으므로 제거합니다. Google 시트의 나머지 데이터는 시각화를 위해 필요하지 않습니다.
파르 세드 다타 어레이에는 이제 FusionCharts가 이해할 수있는 형식의 데이터가 포함되어 있으며 시각화를 계속할 수 있습니다. <: :> 3 단계 : 차트 생성 이제 데이터를 준비하고 액세스 할 수 있으면 차트 생성으로 이동할 수 있습니다. 차트 생성에는 다음 단계가 포함됩니다

내부에서 차트가 렌더링 될
생성. Google 시트에서 구문 분석 된 데이터를 사용하여 FusionCharts 인스턴스 생성. Div에서 렌더링하기 위해 FusionCharts 인스턴스의 렌더 메소드를 호출합니다.
마크 업에 CDN을 통해 FusionCharts 라이브러리를 포함시킵니다.
및 차트의 포함 요소. 여기에는 차트 렌더가 표시되기 전에 표시되는 장소 홀더 텍스트가 포함될 수 있습니다.
실제로 기본 수평 막대 차트를 #Chart-Container로 생성하고 렌더링하려면 성공 콜백에 다음 코드를 추가합니다.
차트에 대해 정의한 구성 옵션 중 일부를 살펴 보겠습니다.
유형 :이 예제에서 플롯하려는 차트 유형을 정의합니다. 높이 : 픽셀로 차트의 높이.
너비 : 차트의 너비 차트 : 여기서 제목, 두 축에 대한 레이블, 값 접두사 등과 같은 것을 설정할 수 있습니다. 데이터 : 차트는. 에서 구성됩니다
그리고 여기 우리가 지금까지 얻은 것의 데모는 다음과 같습니다.
펜 JavaScript 차트 참조 Codepen에서 sitepoint (@SitePoint)의 Google 시트를 참조하십시오. 차트 사용자 정의 위의 데모가 작동하는 동안 아마도 약간 일반적인 것처럼 보입니다. 운 좋게도 차트 모양의 거의 모든 측면을 사용자 정의 할 수 있습니다. Fusioncharts는 훌륭한 문서를 가지고 있습니다. 여기에 조금 더 보이도록 맞춤화 된 것과 동일한 차트가 있습니다. Codepen의 sitepoint (@sitepoint)의 펜 JavaScript 차트를 참조하십시오.
결론 보았 듯이 Google 시트에서 라이브 차트를 만드는 것은 그리 어렵지 않습니다. 라이브 JavaScript 차트는 복잡한 차트 유형, 이러한 다중 시리즈 차트에 대해서도 생성 할 수 있습니다. 복잡한 차트를 위해 해결해야 할 유일한 것은 Google 시트에서 데이터를 차트에서 허용하는 형식으로 재구성하는 방법입니다. 다른 모든 것은 동일하게 유지됩니다.

Google Sheets 데이터 작업 방법에 대한 자세한 내용은 Google 문서를 확인하십시오. 나는이 튜토리얼의 기본 막대 차트를 사용했지만 다른 것을 원한다면 여기에서 사용할 수있는 다른 차트 유형을 확인하십시오.
.
PS : 아래 의견 섹션에 매달려있을 것이므로이 튜토리얼에 대한 질문이 있으면 언제든지 촬영하십시오. 기꺼이 도와 드리겠습니다!
Google 시트의 데이터를 사용하여 대화식 JavaScript 차트에서 자주 묻는 질문 (FAQ) Google 시트의 데이터를 사용하여 대화식 JavaScript 차트를 어떻게 만들 수 있습니까?
Google 시트의 데이터를 사용하여 대화식 JavaScript 차트 작성에는 여러 단계가 포함됩니다. 먼저 Google Sheets API를 설정해야합니다. 여기에는 Google Cloud 콘솔에서 새 프로젝트를 작성하고 Sheets API를 활성화하고 자격 증명을 생성하는 것이 포함됩니다. API 키가 있으면 Google 시트 데이터에 액세스하는 데 사용할 수 있습니다. 다음으로 JavaScript를 사용하여 차트를 작성해야합니다. Chart.js, HighCharts 및 Google 차트와 같은 여러 라이브러리가 있습니다. 이러한 라이브러리를 사용하여 막대 차트, 라인 차트 및 파이 차트를 포함한 다양한 차트 유형을 만들 수 있습니다. 마지막으로 차트를 Google 시트 데이터에 연결해야합니다. 여기에는 API 키를 사용하여 Google 시트의 데이터를 가져오고 데이터를 차트 라이브러리를 이해할 수있는 형식으로 파싱 한 다음 데이터로 차트를 업데이트하는 것이 포함됩니다.

대화식 JavaScript를 작성할 때 일반적인 문제는 무엇입니까? Google 시트의 데이터를 사용하는 차트?

Google 시트의 데이터를 사용하여 대화식 JavaScript 차트를 작성할 때의 일부 일반적인 문제에는 API 키와 관련된 문제, 데이터를 가져 오는 문제 및 데이터 파싱에 어려움이 포함됩니다. API 키가 올바르게 설정되지 않으면 Google 시트 데이터에 액세스하지 못할 수 있습니다. 데이터를 가져 오는 데 어려움이있는 경우 네트워크 문제 나 Google Sheets API의 문제로 인한 것일 수 있습니다. 데이터를 구문 분석하는 데 어려움이있는 경우 데이터가 차트 라이브러리가 이해할 수없는 형식이기 때문일 수 있습니다. 이러한 문제를 해결하려면 API 키를 확인하고 네트워크 연결을 테스트 한 다음 데이터가 호환되는 형식인지 확인해야합니다.
내 JavaScript 차트에 Google 시트 외에 다른 데이터 소스를 사용할 수 있습니까?

예, JavaScript 차트에는 Google 시트 외에 다른 데이터 소스를 사용할 수 있습니다. Chart.js, HighCharts 및 Google 차트를 포함한 대부분의 차트 라이브러리는 JSON, CSV 및 XML을 포함한 다양한 형식의 데이터를 수락 할 수 있습니다. 데이터베이스, API 및 로컬 파일을 포함한 다양한 소스 에서이 데이터를 가져올 수 있습니다. 그러나 Google Sheets를 데이터 소스로 사용하면 쉽게 설정, 실시간 업데이트 및 데이터를 공유 및 협업하는 기능을 포함하여 몇 가지 장점이 있습니다. Google Sheets의 데이터로 실시간으로 JavaScript 차트를 실시간으로 업데이트하려면 Google Sheets의 데이터로 JavaScript 차트를 실시간으로 업데이트하려면 폴링 메커니즘을 설정해야합니다. 여기에는 Google 시트의 데이터를 주기적으로 가져오고 새로운 데이터로 차트를 업데이트하는 것이 포함됩니다. JavaScript의 SetInterval 함수를 사용하여이를 수행하여 지정된 간격으로 함수를 실행할 수 있습니다. 이 기능에서 Google 시트의 데이터를 가져와 차트 라이브러리를 이해할 수있는 형식으로 구문 분석 한 다음 새 데이터로 차트를 업데이트 할 수 있습니다.
대화 형 JavaScript 차트를 다른 사람과 공유 할 수 있습니까? ?
예, 대화 형 JavaScript 차트를 다른 사람들과 공유 할 수 있습니다. Chart.js, HighCharts 및 Google 차트를 포함한 대부분의 차트 라이브러리를 사용하면 차트를 이미지 또는 PDF로 내보낼 수 있습니다. 그런 다음이 파일을 다른 사람과 공유 할 수 있습니다. 또는 차트가 웹 페이지에서 호스팅되는 경우 페이지의 URL을 간단히 공유 할 수 있습니다. Google Sheets를 데이터 소스로 사용하는 경우 Google Sheets 문서를 다른 사람과 공유하여 데이터를보고 편집 할 수 있습니다.

JavaScript 차트의 모양을 사용자 정의 할 수 있습니까?

차트 라이브러리에서 제공 한 옵션을 사용하여 JavaScript 차트의 모양을 사용자 정의 할 수 있습니다. Chart.js, HighCharts 및 Google 차트를 포함한 대부분의 차트 라이브러리를 사용하면 색상, 글꼴, 레이블 및 툴팁을 포함하여 차트의 다양한 측면을 사용자 정의 할 수 있습니다. 축소 및 패닝 및 애니메이션과 같은 대화식 기능을 추가 할 수도 있습니다.
JavaScript 차트에 상호 작용을 추가하려면 제공된 옵션을 사용하여 JavaScript 차트에 상호 작용을 추가 할 수 있습니다. 차트 라이브러리에 의해. Chart.js, HighCharts 및 Google 차트를 포함한 대부분의 차트 라이브러리를 사용하면 툴팁, 확대 / 축소 및 패닝 및 애니메이션과 같은 대화식 기능을 추가 할 수 있습니다. 또한 이벤트 리스너를 차트에 추가하여 사용자가 데이터 포인트 클릭과 같은 특정 방식으로 차트와 상호 작용할 때 기능을 실행할 수 있습니다.
내 모바일에서 JavaScript 차트를 사용할 수 있습니까? App?
예, 모바일 앱에서 JavaScript 차트를 사용할 수 있습니다. Chart.js, HighCharts 및 Google 차트를 포함한 대부분의 차트 라이브러리는 모바일 장치와 호환됩니다. 그러나 더 작은 화면에서 차트가 올바르게 표시되도록 조정해야 할 수도 있습니다. 여기에는 차트의 크기, 요소 레이아웃 및 터치 상호 작용을 조정하는 것이 포함될 수 있습니다.
내 JavaScript 차트로 문제를 디버그하는 방법

JavaScript로 문제를 디버그 할 수 있습니다. 웹 브라우저에서 개발자 도구를 사용하는 차트. 이 도구를 사용하면 차트의 요소를 검사하고 콘솔 로그를보고 JavaScript 코드를 진행할 수 있습니다. Google 시트 데이터에 문제가있는 경우 Google Sheets API Explorer를 사용하여 API 요청을 테스트 할 수도 있습니다. 내 JavaScript 차트의 성능을 최적화하려면 Google 시트에서 가져온 데이터 양을 최소화하고 JavaScript 코드를 최적화하며 성능을 사용하여 JavaScript 차트의 성능을 최적화 할 수 있습니다. 차트 라이브러리의 기능. 많은 양의 데이터를 가져 오면 차트 속도가 느려질 수 있으므로 필요한 데이터 만 가져 오십시오. 불필요한 계산을 피하고 효율적인 알고리즘을 사용하여 JavaScript 코드를 최적화 할 수도 있습니다. Chart.js, HighCharts 및 Google 차트를 포함한 대부분의 차트 라이브러리는 게으른로드 및 하드웨어 가속도와 같은 성능 기능을 제공합니다.