Google 차트 API 및 AngularJS를 사용하여 시각화 앱 생성-JS 튜토리얼-php.cn

Creating a Visualization App Using the Google Charts API and AngularJS

코어 포인트

Google의 인기있는 JavaScript 프레임 워크 인 AngularJS는 Google 차트 API를 활용하는 동적 시각적 응용 프로그램을 구축하는 데 사용될 수 있습니다. Angular의 양방향 바인딩 기능을 사용하면 차트가 데이터 및 사용자 입력을 기반으로 동적으로 변경할 수 있습니다.

angularjs로 시각적 애플리케이션을 만드는 데는 Angular 설정, 응용 프로그램 구축 및 차트 작성과 같은 여러 단계가 포함됩니다. 이 프로세스에는 HTML 및 JavaScript에서 코드를 작성하고 Angular의 MVC 설계 패턴을 사용하고 시각화를 위해 Google 차트 API를 통합해야합니다.

Google 차트 API는 색상, 글꼴 및 그리드 라인 변경을 포함하여 다양한 차트 사용자 정의 옵션을 제공합니다. 또한 사용자가 차트에서 항목을 선택할 때 이벤트 트리거링과 같은 대화식 기능을 제공합니다. AngularJS와 함께 Google 차트를 사용하려면 개발자는 Angular-Google-Charts 패키지를 사용할 수 있습니다.

JavaScript는 요즘 어디에나 있습니다. ember.js, backbone.js 등과 같은 유용한 유용한 JavaScript 프레임 워크가 웹의 얼굴을 바꾸고 있습니다. 가장 인기있는 프레임 워크 중 하나는 Google에서 개발 한 AngularJS입니다. 이 기사는 AngularJS를 사용하여 시각적 애플리케이션을 구축하는 방법을 가르쳐 줄 3 가지 기사 중 첫 번째 기사입니다. 샘플 응용 프로그램은 Google 차트 API를 사용하여 데이터를 시각화합니다. 우리는 Angular의 놀라운 양방향 바인딩 기능 중 하나를 사용하여 데이터 및 사용자 입력을 기반으로 차트를 동적으로 변경하도록합니다. 시작하기 전에 먼저 Google 차트 API 사용 방법을 이해해 봅시다. 이 응용 프로그램의 경우 라인 차트, 파이 차트 등과 같은 몇 가지 기본 차트를 사용합니다.
Google 차트
Google 차트 설명서에서 다음 예제는 Google 차트 API 사용 방법을 신속하게 검토합니다. 첫 번째 스크립트는 Ajax API를로드합니다. 두 번째 스크립트에서 첫 번째 줄은 시각화 API 및 Linechart 패키지를로드합니다. 두 번째 줄은 Google 시각화 API가로드 될 때 실행되는 콜백 기능을 설정합니다. 콜백 함수는 데이터 테이블을 생성하고 차트 옵션을 설정하고 차트를 인스턴스화하며 차트를 만듭니다.

이 API에 익숙하지 않거나 검토가 필요한 경우 Google 차트 문서를 읽는 것이 좋습니다.

Angularjs

angular를 사용하기 전에 :

<.> node.js 를 설치하십시오 Github

의 클론 종자 프로젝트

터미널에서 시드 프로젝트로 이동하여 다음 명령을 입력하십시오.

콘솔에 다음 메시지 출력이 표시됩니다.

<🎜>
<🎜>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

로그인 후 복사

이 시점에서 http : // localhost : 8000/app/index.html로 탐색하여 데모 페이지를 볼 수 있습니다.

Angular는 MVC (Model-View-Controller) 설계 모드를 사용합니다. 이 튜토리얼에서는 컨트롤러에 중점을 둘 것입니다. 현재 컨트롤러는 페이지의 특정 부분을 처리하고보기를 사용하여 데이터를 렌더링하는 논리로 간주 될 수 있습니다. 응용 프로그램 작성을 시작하면 컨트롤러가 무엇인지 더 잘 이해할 수 있습니다. 이제 Angular Seed 프로젝트를 살펴 보겠습니다. 응용 프로그램을 구축 할 각도 응용 템플릿입니다. Angular Seed 프로젝트에서 App/JS로 이동하십시오. 거기서 컨트롤러, 지침, 응용 프로그램, 필터 및 서비스를 볼 수 있습니다. 이것이 우리가 응용 프로그램을 만들 때 사용할 것입니다.

<🎜 🎜> <<> 응용 프로그램을 빌드

<🎜 🎜> index.html의 코드를 다음 코드로 바꿉니다.

<🎜 🎜> <<> 컨트롤러 앞에서 언급 한 바와 같이, 컨트롤러에는 페이지의 특정 부분을 처리하기위한 논리가 포함되어 있습니다. 이전 코드 예제에서 다음 줄에 주목하십시오.

이 div에는 myctrl1의 값이있는 ng-controller 속성이 있습니다. myctrl1은 파일 앱/js/controllers.js에있는 컨트롤러 함수의 이름입니다. ng-controller 속성을

directive

라고합니다. Angular Directive는 HTML을 향상시키는 데 사용되며 NG-Controller Directive는 페이지의 특정 부분에 대한 컨트롤러를 설정하는 데 사용됩니다. {{name}}은 컨트롤러에서 뷰로 데이터를 전달하는 데 사용되는 변수입니다. 이제 문제는 myctrl1 컨트롤러 내부의 변수 이름에 액세스하는 방법입니다. 이곳은 $ SCOPE가 시작되는 곳입니다. $ SCOPE는 컨트롤러와 뷰 사이의 통신 메커니즘 역할을하는 객체입니다. 아래의 수정 된 Controllers.js 코드를 확인하십시오

<🎜>
<🎜>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

로그인 후 복사

 이전 코드에서는 $ 범위를 매개 변수로 전달하고 변수 이름을 설정했습니다. 이제 다음 명령으로 node.js 서버를 다시 시작하십시오. 

 이제 브라우저 URL을 http : // localhost : 8000/app/index.html로 가리 르면 이름이 표시되어야합니다. 
<🎜 🎜> <<> 차트를 만듭니다 
 
<'s> 이제 차트를 그려 봅시다. 먼저 index.html에 ajax api를 포함하십시오. 
cd angular-seed
node scripts/web-server.js
로그인 후 복사
 다음, 다음과 같이 index.html에서 div를 수정하십시오. 

 Controllers.js에 시각화 API 및 Linechart 패키지를로드하십시오. 

 패키지를로드 한 후에는 각도 응용 프로그램을 초기화해야합니다. <code>HTTP Server running at http://localhost:8000/</code>
로그인 후 복사

Angular.bootstrap은 Angular Applications를 수동으로 시작하기위한 글로벌 API입니다. Google 차트 작성 코드를 컨트롤러 기능에 복사하여 붙여 넣으면 이것이 최종 결과입니다.

코드를 실행하기 전에 HTML 태그에서 index.html을 편집하고 html 태그에서 "myapp"를 제거하십시오. NG-APP은 응용 프로그램 부팅 요소를 사용합니다. 그러나 컨트롤러 코드 (다음 줄을 사용하여)에서 이미이를 수행하므로 HTML에서 제거 할 수 있습니다. <!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
</head>
<body>
  <div ng-controller="MyCtrl1">{{name}}</div>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
</body>
</html>
로그인 후 복사

 노드 서버를 다시 시작하고 http : // localhost : 8000/app/index.html을 방문하십시오. 가상 데이터를 기반으로 한 줄 차트가 표시되어야합니다. 
<🎜 🎜> <<> 결론  이 튜토리얼 의이 부분에서 우리는 Angular Controllers에 중점을 둡니다. 다음 기사에서는 지침 및 $ 범위 사용에 중점을 둘 것입니다. 동시에이 기사의 모든 코드는 Github에서 찾을 수 있습니다. 

Google 차트 API 및 AngularJS <🎜 
 <🎜 🎜>를 사용하여 시각적 애플리케이션을 생성하기위한 <🎜 🎜> <<> FAQ (FAQ)
 Google 차트 모양을 사용자 정의하는 방법은 무엇입니까? 
 Google 차트 API는 차트 모양을 수정할 수있는 광범위한 사용자 정의 옵션을 제공합니다. 색상, 글꼴, 그리드 라인 등을 변경할 수 있습니다. 차트를 사용자 정의하려면 차트 Draw () 메소드에서 옵션 객체를 수정해야합니다. 예를 들어, 차트의 제목을 변경하려면 다음 코드를 사용할 수 있습니다.