Google 차트 API 및 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 서버를 다시 시작하십시오. <p> <strong> <the> 이제 브라우저 URL을 http : // localhost : 8000/app/index.html로 가리 르면 이름이 표시되어야합니다. </the></strong> 차트를 만듭니다 </p> <p> 이제 차트를 그려 봅시다. 먼저 index.html에 ajax api를 포함하십시오. </p> <pre class='brush:php;toolbar:false;'>cd angular-seed node scripts/web-server.js</pre> <ify> 다음, 다음과 같이 index.html에서 div를 수정하십시오. <p> <em> <ization> Controllers.js에 시각화 API 및 Linechart 패키지를로드하십시오. </ization></em> </p> <the> 패키지를로드 한 후에는 각도 응용 프로그램을 초기화해야합니다. <pre class="brush:php;toolbar:false">&lt;code&gt;HTTP Server running at http://localhost:8000/&lt;/code&gt;</pre> <p> Angular.bootstrap은 Angular Applications를 수동으로 시작하기위한 글로벌 API입니다. Google 차트 작성 코드를 컨트롤러 기능에 복사하여 붙여 넣으면 이것이 최종 결과입니다. </p> 코드를 실행하기 전에 HTML 태그에서 index.html을 편집하고 html 태그에서 "myapp"를 제거하십시오. NG-APP은 응용 프로그램 부팅 요소를 사용합니다. 그러나 컨트롤러 코드 (다음 줄을 사용하여)에서 이미이를 수행하므로 HTML에서 제거 할 수 있습니다. <pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; ng-app=&quot;myApp&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;My AngularJS App&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-controller=&quot;MyCtrl1&quot;&gt;{{name}}&lt;/div&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p> <n> 노드 서버를 다시 시작하고 http : // localhost : 8000/app/index.html을 방문하십시오. 가상 데이터를 기반으로 한 줄 차트가 표시되어야합니다. </n></p> 결론 <p> <strong><of>이 튜토리얼 의이 부분에서 우리는 Angular Controllers에 중점을 둡니다. 다음 기사에서는 지침 및 $ 범위 사용에 중점을 둘 것입니다. 동시에이 기사의 모든 코드는 Github에서 찾을 수 있습니다. <p> Google 차트 API 및 AngularJS 를 사용하여 시각적 애플리케이션을 생성하기위한 FAQ (FAQ) <ize> Google 차트 모양을 사용자 정의하는 방법은 무엇입니까? <p> <s> Google 차트 API는 차트 모양을 수정할 수있는 광범위한 사용자 정의 옵션을 제공합니다. 색상, 글꼴, 그리드 라인 등을 변경할 수 있습니다. 차트를 사용자 정의하려면 차트 Draw () 메소드에서 옵션 객체를 수정해야합니다. 예를 들어, 차트의 제목을 변경하려면 다음 코드를 사용할 수 있습니다. <strong> <object> 옵션 객체에는 차트를 광범위하게 사용자 정의 할 수있는 많은 속성을 포함 할 수 있습니다. </object></strong> <inter> Google 차트에 상호 작용을 추가하는 방법은 무엇입니까? </inter></s></p> <s> Google 차트 API는 차트에 상호 작용을 추가하는 여러 가지 방법을 제공합니다. 가장 일반적인 방법 중 하나는 사용자가 차트에서 항목을 선택할 때 트리거되는 "Select"이벤트를 사용하는 것입니다. "Select"이벤트를 듣는 차트에 이벤트 리스너를 추가하고 트리거시 작업을 수행 할 수 있습니다. 예는 다음과 같습니다. <example> <h3> 이 예에서는 사용자가 차트에서 항목을 선택하면 선택한 항목 값을 표시하는 경고 상자가 나타납니다. </h3> <google> AngularJS와 함께 Google 차트를 사용하는 방법은 무엇입니까? <p> <chart> angularjs와 함께 Google 차트를 사용하려면 Angular-Google-Charts 패키지를 사용할 수 있습니다. 이 패키지는 Google 차트를 AngularJS 애플리케이션에 쉽게 통합 할 수있는 AngularJS 지침 세트를 제공합니다. 패키지를 설치하려면 다음 명령을 사용할 수 있습니다. </chart></p> 패키지를 설치 한 후 패키지에서 제공 한 지침을 사용하여 차트를 작성하고 사용자 정의 할 수 있습니다. <pre class='brush:php;toolbar:false;'>&lt;🎜&gt; &lt;🎜&gt; &lt;div id=&quot;chart_div&quot; style=&quot;width: 900px; height: 500px;&quot;&gt;&lt;/div&gt;</pre> <multiple> Google 차트에서 여러 데이터 레이스를 연결하는 방법은 무엇입니까? <p> <the> Google.visualization.data.join () 메소드를 사용하여 Google 차트에서 여러 데이터 레이스를 연결할 수 있습니다. 이 메소드는 세 가지 DataTables를 매개 변수로 사용합니다 : 첫 번째 데이터 가능, 두 번째 데이터 가능 및 각 데이터 가능의 주요 열이 있습니다. 이 메소드는 주요 열 값이 일치하는 두 개의 DataTables에서 새로운 데이터 가능한 행을 반환합니다. 예는 다음과 같습니다. <example> </example></the></p> 이 예에서는 DataTable1 및 DataTable2가 각 데이터 테이블의 첫 번째 열에 연결됩니다. <h3> <chart> Google 차트를 사용하여 어떤 유형의 차트를 만들 수 있습니까? </chart> </h3> <s> Google 차트 API는 라인 차트, 막대 차트, 파이 차트, 산란 차트, 영역 차트 등을 포함한 다양한 차트 유형을 지원합니다. 각 차트 유형은 API의 특정 클래스로 표시되며 해당 클래스의 인스턴스를 생성하여 차트를 만들 수 있습니다. 예를 들어, 줄 차트를 만들려면 다음 코드를 사용할 수 있습니다. </s><p> 이 예에서는 새로운 라인 차트가 작성되어 id "Chart_div"가있는 HTML 요소로 표시됩니다. </p></multiple></google></example></s></ize></p></of></strong></p></the></ify>

위 내용은 Google 차트 API 및 AngularJS를 사용하여 시각화 앱 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!