차트 및 맵의 범위를 만들기 위한 코드를 제공하는 여러 차트 API가 있습니다. 구글 차트 API는 하나의 플랫폼입니다. 약간의 자바 스크립트 및 데이터 지식으로, 당신은 그들을 대화 형으로 만들고 사이트에 통합 할 수 있습니다. 그런 다음 차트를 그리는 함수를 만듭니다. 이 예제에서는 함수의 이름이 drawChart()로 지정되지만 원하는 모든 함수의 이름을 지정할 수 있습니다. 적절한 이벤트가 있는 양식 HTML에서 호출합니다. 예: 함수 내에서 JavaScript를 사용하여 양식의 값을 직접 입력또는 JSON을 통해 변수로 가져옵니다. arrayToDataTable 요소와 변수 이름을 포함 합니다. 코드는 차트를 만들고 적절한 DOM 요소로 그리는 선언으로 끝납니다. 이 예제에는 필터링된 데이터 테이블이 포함되어 있으며, 이 예제에서는 대용량 데이터 집합 필터링 단원에서 자세히 다룹니다.

위와 같이 맵 데이터는 origData에 저장되지만 드롭다운을 선택하면 맵에 대해 호출되는 newData 배열이 만들어집니다. 이 튜토리얼은 당신에게 구글 차트의 기초를 가르 칠 것입니다. 튜토리얼은 적절한 예제와 구글 차트의 모든 기본 구성 요소를 논의 장이 포함되어 있습니다. 이 예제는 단일 요청에서 모든 데이터를 가져오지 않고 페이징된 테이블 시각화에 큰 데이터 집합을 표시하는 방법을 보여 주는 예제입니다. 이 기능은 많은 양의 데이터가 있고 페이지에 모든 데이터를 한 번에 요청하거나 저장하는 오버헤드를 피하려는 경우에 유용합니다. Google 차트는 대화형 차트 기능을 추가하여 웹 애플리케이션을 향상시키기 위한 순수 자바스크립트 기반 차트 라이브러리입니다. 구글 차트는 차트의 다양한 제공합니다. 예를 들어 꺾은개 차트, 스프라인 차트, 지역 차트, 막대형 차트, 원형 차트 등을 예로 들 수 있습니다.

이 예제에서는 쿼리를 보내는 여러 측면을 래핑하는 JavaScript 개체를 만드는 방법을 보여 줍니다. QueryWrapper라고 하는 이 개체는 쿼리 문자열, 시각화에 대한 핸들 및 시각화에 대한 옵션 집합으로 인스턴스화됩니다. 외부 호출자에게 한 메서드를 노출합니다. 호스트 페이지에는 결과가 조직도 시각화에 표시됩니다. 이 예제에서는 Google 지오차트(초ropleth 맵이라고도 함)를 보여 주기도 합니다.

Scroll Up