Angular 2 및 Fusioncharts로 차트 구성 요소 구축

키 테이크 아웃

는 차트 구성 요소를 구축하는 데 Angular 2를 활용하여 언어 지원 강화 및 DOM 관리를 포함하여 각도 1.X보다 개선을 활용합니다. javaScript로 직접 코딩하여 전용 Angular 2 플러그인이 부족 했음에도 불구하고 시각적으로 매력적인 차트를 생성하기 위해 FusionCharts를 Angular 2와 통합합니다. 데이터 세트 (예 : 주요 기술 회사의 2014 및 2015 년 수익 통계) 사이에 토글링 할 수있는 동적 차트 구성 요소 개발, 상호 작용 및 사용자 참여 강화. FusionCharts의 주석 기능을 사용하여 차트 축에 회사 로고를 추가하여 맞춤형 시각적 경험을 제공하는 등 차트를 사용자 정의합니다. angular 2 및 FusionChart와의 추가 기능 및 통합 가능성을 탐색하여 독자가보다 복잡한 구성 및 차트 유형으로 기본 차트 구성 요소를 확장하도록 장려합니다.

이 기사는 Vildan Softic이 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! 웹 개발자로서, 당신이 놓칠 수없는 것이 있다면, 그것은 각도 2입니다. 그것은 Google에서 인기있는 JavaScript 프레임 워크를 완전히 다시 작성하고 모든 올바른 이유로 지속적으로 뉴스에 있습니다. 그것은 이전 버전에 비해 몇 가지 주요 개선 사항을 제공하므로 오늘날 아름다운 차트를 구축하기 위해 선택하고 있습니다.

. 차트의 경우 FusionCharts가 제공하는 JavaScript 차트 라이브러리를 사용합니다. 그것은 좋은 차트 모음을 제공하며 모든 주요 브라우저와 호환됩니다. FusionCharts는 Angular 용 전용 플러그인을 제공하지만 아직 Angular 2와 호환되지 않습니다. 따라서 JavaScript 및 Angular 2를 사용하여 직접 코딩하지 않을 것입니다. 앱에서 Angular 1을 사용하고 있습니다 우리가 계획 할 차트는 흥미로운 통계를 묘사합니다. 5 개의 최고 기술 회사 (Amazon, Apple, Facebook, Google 및 Microsoft)의 수익은 2014 년과 2015 년의 수익 데이터간에 전환 할 수있는 옵션을 갖습니다. 먼저 Angular 2에서 차트를 작성하는 단계별 프로세스를 거치게됩니다. 기본 차트를 구축 한 후에는 주석 추가 및 차트 데이터 업데이트와 같은 고급 주제를 다룹니다.
• . 그 어느 때보 다 Github Repo 에서이 자습서 코드를 다운로드하거나 기사 끝에서 완성 된 차트의 데모로 점프 할 수 있습니다. 각도 2 대 각도 1.x

  Angular 2는 이전 주요 버전 (Angular 1.x)에 비해 몇 가지 중요한 변경 사항이 있습니다. Angular 1 개념 및 기술이 Angular 2에 어떻게 매핑되는지에 대해 자세히 알아 보려면 공식적인 빠른 참조를 확인할 수 있습니다. Angular 1.X에서 Angular 2로 앱을 마이그레이션하는 데 관심이 있으시면 공식 마이그레이션 안내서를 읽을 수 있습니다. Angular 2는 TypeScript 및 DART를 지원하지만 Native JavaScript를 사용하여 친숙함에 따라이 튜토리얼에서 Angular 2 응용 프로그램을 작성합니다. TypeScript 또는 DART를 사용하면 불필요한 빌드 단계가 도입됩니다.

  설정 Angular 2 프로젝트를 통해 일어나고 달리는 방법에는 여러 가지가 있습니다. 가장 쉬운 것은 아마도 공식 사이트로 가서 5 분의 QuickStart 튜토리얼을 따르는 것입니다. 그러나이 접근법에 대한 약간의 경고 중 하나는 시스템에 노드와 NPM이 설치된 것에 의존한다는 것입니다. 이에 대한 안내서가 있지만 설치하지 않고이 튜토리얼을 따르고 싶다면 다음 템플릿을 사용할 수 있습니다.

  차트 구성 요소 만들기 구성 요소는 Angular 2 응용 프로그램의 빌딩 블록입니다. 그들은보기와 논리로 구성된 재사용 가능한 코드입니다. Angular 1에 익숙하다면 템플릿과 컨트롤러가있는 지침으로 생각할 수 있습니다. 차트 구성 요소의 기초는 다음과 같습니다

  무슨 일이 일어나고 있는지 확인하기 위해 잠시 시간을 내겠습니다 우리는 앱을 네임 스페이스하는 데 사용하는 iife (즉시 호출 된 기능 표현식)로 시작합니다. Window.chartapp을 인수로 전달합니다. 인수는 빈 객체가 정의되지 않은 경우 빈 객체로 초기화됩니다. 이곳은 우리의 응용 프로그램이 살아 갈 곳입니다. 글로벌 오브젝트의 단일 속성. 내부에서 우리는 ng.core (Angular의 핵심 구성 요소 모음)에서 구성 요소와 클래스 메소드를 체인하여 구성 요소 (AppComponent)를 만듭니다. 우리는 구성 요소 메소드를 전달합니다.

  선택기 : 호스트 HTML 요소를 지정하는 간단한 CSS 선택기. Angular는이 선택기와 일치하는 HTML 요소가 발생할 때마다 구성 요소의 인스턴스를 생성하고 표시합니다. 템플릿 : 구성 요소가 렌더링 될 때 사용할 템플릿. 현재 우리는 자리 표시 자

  요소가 포함 된 문자열을 전달하고 있지만 이상적으로는 이것을 자체 템플릿으로 옮겨야합니다. 클래스 메소드는 템플릿의 동작 및 이벤트 바인딩을 추가하는 곳입니다. 기본 구성 요소를 정의한 후 Angular의 브라우저 부트 스트랩 함수를 사용하여 초기화합니다. 이 시점에서 브라우저에서 코드를 실행하고“차트가 여기에서 렌더링됩니다”라는 메시지를 볼 수 있어야합니다. 차트 생성 차트를 만들고 2014 년에 대한 데이터를 표시하겠습니다.

  이를 위해서는 차트 인스턴스에 대한 모든 구성 매개 변수가 포함 된 객체를 전달하는 FusionCharts 생성자 함수를 사용해야합니다.

  유형 :

  를 작성하려는 차트 유형 renderat : 차트가 렌더링 될 DOM 선택기

  너비와 높이 : 차트 치수 id : 생성 된 차트의 ID <:> dataformat : DataSource 옵션으로 전달 된 데이터 형식 DataSource : 실제 차트의 구성 및 표시 해야하는 데이터

  • 다음은 다음은 전체 구성 파일입니다. 차트 옵션이 실제로 무엇을하는지 확실하지 않거나 차트의 모양이 어떻게 구성 될 수 있는지 확인하려면 FusionCharts 문서에서 차트 속성 페이지를 참조 할 수 있습니다.
  우리가해야 할 또 다른 일은 차트가 렌더링 해야하는 컨테이너를 포함하도록 템플릿을 업데이트하는 것입니다. 구성 요소의 템플릿 속성에 문자열을 지정하여 (이전과 같이) 템플릿을 자체 파일로 이동하여 TemplateUrl을 사용하여 참조하여이를 수행 할 수 있습니다.
  • 어느 쪽이든, 이것은 우리의 템플릿이 어떻게 생겼는지입니다.
  • 여기 우리가 지금까지 가지고있는 데모는 다음과 같습니다
  PLUNK로드…
  • Plunker 에서이 데모의 코드를 볼 수 있습니다. Plunker의 데모를 클릭하면 Main.js 파일에서 FusionCharts 구성 데이터를 자체 파일로 분리 한 다음 Angular의 HTTP 클래스를 사용하여 가져 오는 것을 알 수 있습니다. 이것은 명확성을위한 것입니다 (각도 별 코드를 쉽게 따라갈 수있게 함). 또한 데이터를 요청하는 것이 일반적으로 실제 시나리오에서 수행해야 할 일이기 때문입니다.
  . 그러나 이것은 절대적으로 필요하지 않으며 ChartApp 생성자에서 직접 모든 것을 수행함으로써 동일한 결과를 얻을 수 있습니다.
  • 언급해야 할 유일한 것은 초기화 코드가 FusionCharts.ready 메소드 내에 래핑된다는 것입니다. 이는 FusionCharts 라이브러리가로드되기 전에 차트 인스턴스턴스 코드가 호출되지 않도록 보호합니다. 기본 차트가 준비된 경우 이름 대신 회사 로고를 사용하고 2015 년의 새로운 데이터로 차트를 업데이트하는 것과 같은 더 많은 기능을 추가 할 때입니다. 주석 추가 X 축에 회사 로고를 추가하기 위해 FusionCharts의 강력한 기능 중 하나 인 주석 를 사용할 것입니다. Fusioncharts 객체의 주석은 차트의 지정된 위치에 사용자 정의 모양 또는 이미지를 그릴 수 있습니다. 차트 중심에 회사 로고를 추가하고 싶다고 가정 해 봅시다. 주석과 매크로를 사용하여 수행 할 수 있습니다. 매크로는 차트 중심의 좌표를 제공하고 주석이 해당 위치에 이미지를 추가 할 수 있습니다. 예를 들어 동적 주석을 사용하여 차트의 데이터에 의존하는 위치에 대한 정보를 얻을 때 상황이 흥미로워집니다. 칼럼이 끝나는 곳에 정확히 무언가를 그려고 싶다고 상상해보십시오. 동적 주석 MACRO $ DATASET.0.SET.1.ENDX 및 $ DATASET.0.SET.1.ENDY를 사용하여 열 끝점의 X 및 Y 좌표를 결정한 다음 거기에 무언가를 그릴 수 있습니다. 이 FusionCharts 문서 페이지에서 주석 및 사용 방법에 대한 자세한 내용을 배울 수 있습니다. 차트의 경우 동적 주석 매크로를 사용하여 각 열의 시작 및 종료 좌표를 얻을 수 있습니다. 그러면 각 회사 로고를 그릴 것입니다. 또한 차트 속성 "showlabels": "0". 를 사용하여 기본 X 축 레이블을 비활성화합니다. 위 목표를 달성하려면 차트 구성에 다음 코드를 추가하십시오.

    위의 코드에서

    유형은 주석 유형을 설정합니다 URL은 이미지의 주소를 설정합니다 x와 y는 이미지의 시작 x와 y 코디네이트를 설정하고 있습니다.

    위의 코드를 추가 한 후 x 축에 회사 로고가 렌더링됩니다. 주석 사용 및 가능한 다른 항목에 대한 자세한 내용은 문서 페이지 (위의 언급)를 참조하십시오. 데이터 세트 사이에 토글링 우리가 구현하려는 마지막 것은 선택한 연도 (2014 또는 2015)에 따라 다른 데이터 세트를 보면서 몇 년 사이에 전환 할 수 있도록하는 것입니다. 데이터 구조 따라서 우리는 다른 해 동안 다른 데이터 세트를 정의 할 수있는 방식으로 데이터를 구성하는 방법을 고려해야합니다. 앞에서 언급했듯이 FusionCharts는 구성 옵션이 데이터 속성을 포함 할 것으로 예상하며, 이는 레이블/값 쌍 세트를 포함하는 배열이어야합니다.

    여러 데이터 세트를 처리하는 한 가지 방법은 생성자 함수의 맨 위에있는 데이터 세트 객체를 정의하고 별칭을 사용하여 생성자에 첨부하는 것입니다.

    그런 다음, 구성 옵션에서 우리는 FusionCharts 생성자에게 전달할 수 있습니다.

    토글 에 차트 데이터 업데이트 우리는 또한 누군가가 2015 버튼을 클릭하고 2014 버튼을 클릭 할 때 2014 년 데이터를 표시하는 것으로 다시 전환하면 2015 년 데이터로 차트를 업데이트하기를 원합니다. . 두 버튼을 추가하겠습니다.이 작업을 수행하고 스타일을 제공하는 데 사용됩니다. 다음과 같이 구성 요소 템플릿을 수정하십시오

    이벤트 리스너를 추가하고 Angular 2에 NGClass 지시문을 추가하기위한 새로운 구문을 주목하십시오. 앵글 1과 거의 동일하며 일부 괄호와 괄호를 제외하고. 선택한 CSS 클래스에 버튼 요소를 적용하여 현재 선택된 연도를 강조하기 위해 NGClass 지시문을 추가했습니다. 이것은 버튼 클릭에서 업데이트되는 구성 요소의 선택한 속성을 기반으로합니다. 우리는 구성 요소가 생성자의 상단에 다음 줄을 추가하여 구성 요소가 렌더링 될 때 현재 선택된 연도를 2014 년으로 설정할 수 있습니다.

    버튼 클릭을 처리하는 논리가 새 연해 함수에 추가됩니다.

    이를 위해서는 차트 구성 옵션과 실제 차트 데이터가 모두 필요한 FusionChart의 SetChartData 메소드를 사용합니다. 차트 속성을 먼저 저장 한 다음 참조하는 대신 GetChartData 메소드를 사용하여 이미 렌더링 된 차트에서 차트 속성을 가져 와서 해당 데이터를 연도 특정 데이터로 수정합니다.

    버튼의 HTML과 해당 버튼의 위의 클릭 핸들러를 추가 한 후 해당 버튼을 클릭하면 해당 해당 해당 차트 데이터를로드해야합니다.

    데모 그리고 여기에 마지막 데모가 있습니다.

    <span><span><!DOCTYPE html></span>
    </span><span><span><span><html</span> lang<span>="en"</span>></span>
    </span>  <span><span><span><head</span>></span>
    </span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
    </span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
    </span>
        <span><!-- 1. Load custom CSS & fonts-->
    </span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
    </span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
    </span>
        <span><!-- 2. Load Angular 2 specific libraries -->
    </span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
    </span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
    </span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
    </span>
        <span><!-- 3. Load FusionCharts library-->
    </span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
    </span>
        <span><!-- 4. Load component -->
    </span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
    </span>  <span><span><span></head</span>></span>
    </span>  <span><span><span><body</span>></span>
    </span>
        <span><!-- 5. Display the application -->
    </span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
    </span>  <span><span><span></body</span>></span>
    </span><span><span><span></html</span>></span>
    </span>

    PLUNK로드…

    Plunker 에서이 데모의 코드를 볼 수 있습니다. 또는 Github Repo에서 코드를 다운로드 할 수 있습니다.

    플 랭커를 클릭하면 config.json 파일에서 데이터 세트 속성을 직접 정의했음을 알 수 있습니다. 이것은 우리 구성 요소에서 물건을 훨씬 더 깔끔하게 유지합니다.

    <span>(function(chartApp){
    </span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
    </span>    <span>selector: 'angular-chart',
    </span>    <span>template: '<div>Chart will render here</div>'
    </span>  <span>}).<span>Class</span>({
    </span>    <span>constructor: function(){}
    </span>  <span>});
    </span>
      <span>document.addEventListener('DOMContentLoaded', function() {
    </span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
    </span>  <span>});
    </span><span>})(window.chartApp || (window.chartApp = {}));
    </span>

    결론 및 다음 단계 우리는 간단한 각도 차트를 만들기 시작한 다음 주석 및 기타 FusionCharts의 API를 사용하여 더 많은 기능을 추가했습니다. 그러나 이것은 빙산의 일각 일 뿐이며 Angular 2와 Fusioncharts를 사용하여 훨씬 더 많은 것을 수행 할 수 있습니다. 스스로 탐색 할 수있는 것들 :
    더 많은 차트 포함 : 열 차트가 항상 데이터 세트를 나타내는 가장 좋은 방법은 아닙니다. 사용 사례에 따라 폭포, 레이더, 게이지 등과 같은 다른 차트를 사용하려면이 튜토리얼에서 설명 된 프로세스를 사용하여 다른 차트를 작성하고 성공적으로 수행 할 수 있는지 확인하십시오. >

    <span>new FusionCharts({
    </span>  <span>"type": "column2d",
    </span>  <span>"renderAt": "chart-container",
    </span>  <span>"width": "550",
    </span>  <span>"height": "400",
    </span>  <span>"id": "revenue-chart",
    </span>  <span>"dataFormat": "json",
    </span>  <span>"dataSource": {
    </span>    <span>"chart": {
    </span>      <span>"yAxisName": "Revenue (In USD Billion)",
    </span>      <span>"yAxisMaxValue": "200",
    </span>      <span>...
    </span>    <span>},
    </span>    <span>"data": [{
    </span>      <span>"label": "Amazon",
    </span>      <span>"value": "88.99"
    </span>    <span>}, {
    </span>      <span>"label": "Apple",
    </span>      <span>"value": "182.8"
    </span>    <span>}
    </span>    <span>...
    </span>    <span>]
    </span>  <span>}
    </span><span>});
    </span>

    앱에 차트 포함 차트 포함 : 하이브리드 모바일 앱을 만들고 있다면 Ionic 2 (최신 버전의 Ionic)가 Angular 2를 기반으로한다는 것을 알고 있어야합니다. 그리고 사용할 수 있기 때문에 좋은 소식입니다. 이 튜토리얼은 이온 앱에 대한 차트를 만들기위한 기반으로도 있습니다. 더 많은 이벤트 탐색 :이 튜토리얼에서는 SetChartData 메소드를 사용하는 방법을 설명했지만 앱의 사용자 경험을 향상시키는 데 사용할 수있는 더 많은 이벤트와 방법이 있습니다. FusionCharts가 제공하는 다양한 이벤트 및 방법에 대해 자세히 알아 보려면 위의 링크 된 페이지를 확인하십시오.

  직접 차트를 작성하는 동안 어려움을 겪는 경우 각도 또는 퓨전 차트 (문제에 따라 다름)의 문서를 참조하거나 아래에 의견을 남겨주세요. 나는 기꺼이 도와 드릴 것입니다!

  Angular2 FusionCharts의 차트 구성 요소에 대한 자주 묻는 질문

  Angular2에 Fusioncharts를 설치하려면 어떻게합니까?

  앵글 룰 2에 Fusioncharts를 설치하려면 먼저 NPM을 통해 Fusioncharts 및 Angular Fusioncharts를 설치해야합니다. 터미널에서 다음 명령을 사용하십시오. npm 설치 FusionCharts

  npm 설치 Angular-FusionCharts

  설치 후 FusionCharts 및 Angular FusionCharts를 구성 요소 파일로 가져옵니다. 그런 다음 ngmodule imports 배열에 fusionchartsmodule을 추가하십시오.

  각도 CLI와 함께 FusionCharts를 사용할 수 있습니까?

  
  예, Fusioncharts는 각도 CLI와 호환됩니다. NPM을 통해 FusionCharts 및 Angular FusionCharts를 설치 한 후에도 각도 CLI 프로젝트로 가져올 수 있습니다. ngmodule imports 배열에 fusionchartsmodule을 추가하는 것을 잊지 마십시오.
  angular2에서 fusioncharts를 사용하여 기본 차트를 만드는 방법?
  기본 차트를 만들려면 먼저 차트 구성을 정의하려면 차트 구성을 먼저 정의해야합니다. 요소. 여기에는 차트 유형, 데이터 소스 및 기타 옵션이 포함됩니다. 그런 다음 템플릿의 FusionCharts 구성 요소를 사용하여 차트를 렌더링하십시오. 차트 구성을 수정하여 차트를 사용자 정의 할 수 있습니다.

  앵글 룰 2의 FusionCharts로 어떤 유형의 차트를 만들 수 있습니까?

  FusionCharts는 라인, 바, PIE를 포함한 다양한 차트 유형을 지원합니다. , 지역, 도넛 등. 조합 차트, 줌 라인 차트 및 트리 맵과 같은 고급 차트를 만들 수도 있습니다. 각 차트 유형에는 자체 구성 옵션이있어 귀하의 요구에 맞게 사용자 정의 할 수 있습니다.

  내 FusionCharts 차트에서 데이터를 업데이트하려면 차트에서 데이터를 업데이트하려면 귀하의 차트에서 데이터를 업데이트하려면 어떻게해야합니까? 차트 구성에서 데이터 소스를 수정해야합니다. FusionCharts는 데이터 소스가 변경되면 차트를 자동으로 업데이트합니다. 또한 setjsondata 또는 setchartdata 메소드를 사용하여 프로그래밍 방식으로 데이터를 업데이트 할 수 있습니다.

  angular2에서 fusioncharts를 typescript와 함께 사용할 수 있습니까?

  예, FusionCharts는 TypeScript와 호환됩니다. FusionCharts 및 Angular FusionCharts를 TypeScript 파일로 가져 와서 일반 JavaScript 파일에서와 같이 사용할 수 있습니다.

  Angular2의 FusionCharts에서 이벤트를 어떻게 처리합니까?

  FusionCharts는 여러 가지를 제공합니다. DataPlotClick, ChartClick 및 Beforerender와 같이들을 수있는 이벤트. 이러한 이벤트를 처리하려면 구성 요소의 이벤트 핸들러를 정의하고 템플릿의 FusionCharts 구성 요소에 바인딩해야합니다.

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

  예, 예, 예, 예, 예, Fusioncharts는 광범위한 사용자 정의 옵션을 제공합니다. 색상, 글꼴, 경계, 배경 등을 사용자 정의 할 수 있습니다. 이러한 옵션은 차트 구성에서 설정할 수 있습니다 FusionCharts 차트를 어떻게 내보내려면?

  FusionCharts는 내장 내보내기 기능을 제공합니다. 차트를 이미지, PDF 또는 SVG로 내보낼 수 있습니다. 내보내기를 활성화하려면 차트 구성에서 Exportenabled 옵션을 true로 설정해야합니다.

  FusionCharts 차트의 문제를 디버그하는 방법

  FusionCharts는 자세한 정보를 로그인 디버그 모드를 제공합니다. 차트 렌더링 프로세스. 디버그 모드를 활성화하려면 차트 구성에서 DebugMode 옵션을 true로 설정하십시오. 그런 다음 브라우저 콘솔의 로그를 볼 수 있습니다.

위 내용은 Angular 2 및 Fusioncharts로 차트 구성 요소 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!