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

집

웹 프론트엔드

JS 튜토리얼

Google 차트 API 및 AngularJS를 사용하여 시각화 앱 생성

Jennifer Aniston

Feb 22, 2025 am 09:44 AM

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 서버를 다시 시작하십시오. <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.