이온학 2에서 대화 형 차트 만들기

Sep 15, 2025

어떻게

작은 팀에서 일하면 Android, iOS 및 Windows에 대한 별도의 코드를 작성하고 유지하는 것이 어려워지는 경향이 있습니다. 그것이 ionic과 같은 하이브리드 프레임 워크가 그림에 들어오는 곳입니다. 이들은 우리가 세 플랫폼 모두 모두에 사용할 수있는 단일 코드를 작성할뿐만 아니라 기존 기술 스택을 사용하여 그렇게 할 수있는 것을 의미합니다.

이 튜토리얼에서는 가장 유망한 하이브리드 앱 프레임 워크 중 하나 인 이온학 2에서 데이터 시각화와 같은 공통 작업을 해결하는 방법을 탐색하고 있습니다. 나는이 프로젝트에 대해 90 개 이상의 차트가있는 대형 라이브러리를 제공하므로 FusionCharts JavaScript Chart Library (fusioncharts.com)를 사용합니다. 모든 장치 및 브라우저와 호환되며 매우 쉽게 작업 할 수 있습니다.

이오니아 2 설정

Ionic 2를 사용하여 응용 프로그램을 개발하려면 OS에서 Node.js 버전 4+ 및 NPM이 실행됩니다. 노드 .js 패키지를 다운로드 할 수 있습니다 nodejs.org/en/download. NPM은 함께 설치됩니다. 이미 Node.js가 실행되고 버전 4+를 실행하려는 버전이 다른 경우를 통해이를 수행 할 수 있습니다. 노드 버전 관리자 ...에

다음으로 NPM을 사용하여 Ionic 2 Beta를 설치해야합니다. 이렇게하려면, 실행하십시오 NPM 설치 -g Ionic @ beta. 루트 권한이있는 사용자 계정에서 터미널에서 (전역으로 모듈을 설치합니다). 이온 응용 프로그램을 시뮬레이션하려면 여러 플랫폼에서 생성중인 노드 모듈이 하나 더 필요합니다. 코르도바의 ...에 전역 으로이 전역으로 설치할 수 있습니다 NPM 설치 -g Cordova. ...에

우리는 이제 첫 번째 이온 앱을 만들 준비가되었습니다. 그러나이 설정을 사용하면 브라우저에서 응용 프로그램 만 볼 수 있습니다. iOS 또는 Android 기기의 앱을 시뮬레이션하려면 Cordova에 특정 플랫폼 모듈을 구축해야합니다. 이 튜토리얼에서는 iOS 모듈을 구축 할 것입니다. 따라서 실행해야합니다. 이온 플랫폼 iOS를 추가합니다 ...에

마지막으로 Xcode를 설치해야합니다. 이를위한 지침을 얻을 수 있습니다 여기 ...에

Ionic 2 App.

이 튜토리얼에서는 '차트'라는 Ionic 2 앱을 만들 것입니다. 현재 작업 디렉토리에 '차트'폴더를 만들고 샘플 응용 프로그램으로 앱을 부트 스트랩합니다. 샘플 앱에는 여기에 설명 된대로 기본 페이지가 포함됩니다.

이 응용 프로그램을 만들려면 Run. Ionic Start Charts --v2. 현재 작업 디렉토리 ( 차트 앱의 이름이고 --v2. 이오니아 2 앱을 만들고 싶은 이온 성을 알려줍니다). 이 명령을 실행하면 A. 차트 폴더는 현재 작업 디렉토리에 생성됩니다. 브라우저에서 앱을 테스트하려면 차트 폴더 및 실행 이온 봉사 ...에 그러면 기본 브라우저에서 앱이 시작됩니다.

새 페이지 추가

이제 페이지 / 구성 요소를 추가하십시오. 차트 자바 스크립트 차트를 만드는 응용 프로그램. 첫째, 'Hello World'가있는 간단한 HTML 페이지를 추가 할 것입니다.

이온학 2에서는 페이지를 이온 앱에 추가 할 수 있습니다. @페이지 Decorator (Angular 2 구성 요소를 기반으로 한 이온 모듈)는 완전한 이온 기능에 액세스 할 수 있습니다. 최소한의 최소 페이지에는 템플리트 HTML 파일 (마크 업이 포함 된)과 JavaScript 파일이 필요합니다 (논리가 필요한 논리 포함). 이온 페이지에 대한 자세한 내용을 찾을 수 있습니다 여기 ...에

우리가 추가 할 페이지를 만들려면 도너츠 chart.js. 과 도너츠 - chart.html. 파일의 파일 차트 / 앱 / 페이지 도넛 형 차트 예배 규칙서. HTML 파일에서 앱 탐색 및 간단한 'Hello World'제목에 대한 코드를 추가 할 수 있습니다.

& lt; ion-navbar * navbar & gt; & lt; 버튼 Menutoggle & gt; & lt; 이온 - 아이콘 이름 = "메뉴"& gt; & lt; / 이온 - 아이콘 & gt; & lt; / button & gt; & lt; 이온 - 타이틀 & gt; Hello Ionic & lt; / 이온 - 타이틀 & gt; & lt; / ion-navbar & gt; & lt; 이온 - 함량 & gt; & lt; H1 & gt; Hello World & lt; / div & gt; & lt; / 이온 함량 & gt;

JavaScript 파일 에서이 구성 요소의 템플릿으로 작성된 HTML 파일을 참조합니다. 우리는 아직 멋진 일을하지 않기 때문에 빈 생성자를 추가 할 수 있습니다. 차트 스크래치 ...에

 '이오니컬 - 앵귤러'에서 {Page} 가져 오기;

@페이지({
  Templateurl : '빌드 / 페이지 / 원형 차트 / Pie-Chart.html'
})

수출 클래스 챠지 {
  생성자 () {
  }
}

우리는 방금 독립형 구성 요소를 만들었습니다. 이제 우리는 이것을 주요 앱으로 연결해야합니다. 이렇게하려면 우리는 우리가 만든 구성 요소를 참조해야합니다. app.js. 앱 폴더의 파일을 사용하고 구성 요소를 사용하십시오. 페이지 앱 구성 요소 생성자의 속성.

 './pages/donut-chart/donut-chart'에서 {chartspage} 가져 오기

생성자 (앱, 플랫폼, 메뉴) {
    // 기본 앱 생성자
    이 .app = 앱;
    this.platform = 플랫폼;
    이 .menu = 메뉴;
    이것은 이니티얼 리가 ();
    // 앱 페이지를 설정합니다 - 우리는 여기에 도넛 차트를 추가하고 있습니다.
    이. 페이지 = [
      {제목 : '환영', 구성 요소 : HelloInionicPage},
      {제목 : '도넛 차트', 구성 요소 : Chartspage}
    ];

    // helloionicPage root (또는 첫 번째) 페이지 - 기본 단계
    이 .RootPage = HelloInionIcpage;
}

이러한 변경을 한 후 브라우저의 이온 응용 프로그램은 자동 재 장착되어야합니다 (또는 이온이 터미널에서 다시 사용하는 경우). 이제 앱의 측면 메뉴에서 새로운 링크를 표시해야하며 화면에 쓰여진 'Hello World'가 표시되어야하는 것을 클릭하면됩니다.

JavaScript 차트 만들기

이제 도넛 차트를 만들기 위해 'Hello World'페이지를 수정할 때입니다. FusionCharts 라이브러리를 사용할 수 있으려면 먼저 다음을 포함시켜야합니다. fusioncharts.js. 과 fusioncharts.charts.js. 파일의 파일 www / index.html. 파일.

빠른 팁 : 파일이 두 파일이 같은 폴더에있는 경우 추가 fusioncharts.js. 이것이 자동으로 포함될 수 있으므로 충분합니다 fusioncharts.charts.js. ...에

& lt; script type = "text / javascript"src = "path / to / fusioncharts.js"& gt; & lt; / script & gt;

이제 이전 단계에서 HTML을 수정하여 차트 컨테이너를 만듭니다.

 & lt; div id = "차트 - 용기"& gt; & lt; / div & gt;

생성자에서 도너츠 chart.js. 우리가 위에서 만들었던, 우리는 다음 코드를 추가하여 차트 컨테이너 안에 차트를 만드는 데 필요합니다.

 fusioncharts.ready (함수 (함수) {
  VAR REVENUECHART = 새로운 FusionCharts ({
    유형 : 'Doughnut2d',
    렌더링 : 'Chart-Container',
    너비 : '100 %',
    높이 : '450',
    DataFormat : 'JSON',
    DataSource : {
      "차트": {
        "캡션": "제품 카테고리별로 수익 분열",
        "Subcaption": "작년",
        "numberPrefix": "$",
        "팔레트 코 솔러": "# 0075c2, # 1aaf5d, # F2C500, # F45B00, # 8E0000",
        // 더 많은 차트 속성
      },
      "데이터": [{
          "라벨": "음식",
          "가치": "28504"
        } // 더 많은 데이터
      ...에]
    }
  }).세우다();
});

이 코드에서 우리는 FusionCharts의 생성자를 통해 새 차트를 작성하고 있습니다. 사용 된 특성은 다음과 같습니다.

유형 차트 유형을 정의합니다

렌더링 우리가 차트를 렌더링하려는 컨테이너의 ID입니다.

폭 과 신장 차트 치수를 설정하는 데 사용됩니다

DataFormat. 차트 데이터를 급지하려고하는 형식입니다 (JSON 및 XML뿐만 아니라 XML을 사용할 수 있습니다)

DataSource. FusionCharts 내부의 차트 화장품을 포함합니다 차트 개체와 실제 데이터는 데이터 정렬

나는 그 안에 4 개의 속성 만 보여 주었지만 차트 개체, 차트 디자인을 향상시키는 데 사용할 수있는 100 개 이상의 것들이 있습니다. 그것에 대해 더 자세히 알아볼 수 있습니다 여기 ...에

이 코드가 추가되면 실행됩니다 이온 봉사 앱을 다시 실행하려면. 사이드 메뉴에 '도넛 형 차트'링크가 표시되어야합니다. 내 단계를 올바르게 따를 경우 해당 링크를 클릭하면 도넛 형 차트가 표시되어야합니다! 그렇지 않은 경우 코드를 참조하십시오 이 프로젝트의 Github Repo 네가 어디로 갔는지 보려면.

참고 : 브라우저에서 확인한 후에는 사용하십시오. 이온은 iOS 에뮬레이션합니다 iOS 시뮬레이터에 앱을로드하려면.

합산

Our doughnut chart representing the revenue split of a hypothetical company by product categories — 제품 카테고리별로 가상 회사의 수익 분열을 나타내는 도넛 차트

방금 본 것처럼 이온학 2.에서 데이터 시각화를 시작하는 것은 어렵지 않습니다. 2. 프로세스를 보여주기 위해 간단한 도넛 형 차트를 만들었지만 동일한 프로세스를 사용하여 여러 데이터 집합이있는 복잡한 차트를 만들 수 있습니다. ...에 알아 내어야하는 유일한 것은 FusionCharts가 특정 차트 유형에 대한 데이터를 수락하는 형식입니다. 그렇게 할 수있게되면 라이브러리에서 차트를 만들 수 있습니다.

이 주제에 도움이 필요 하거나이 튜토리얼의 내용에 대해 질문이 있으시면 언제든지 나를 붙잡을 수 있습니다. 트위터에서 ...에나는 항상 도움이 기쁩니다!

이 기사는 원래 나타났습니다 그물 잡지 문제 283; 여기 그것을 구입하십시오 ...에

이온학 2에서 대화 형 차트 만들기

이오니아 2 설정

Ionic 2 App.

새 페이지 추가

JavaScript 차트 만들기

합산

어떻게 - 가장 인기있는 기사

4 개의 가구 항목 (진지하게)으로 자신의 스타일러스를 만드십시오

친 화성 디자이너 : 수출 인물 사용법

물질 디자이너에서 텍스처를 업그레이드하십시오

오일로 빛을 캡처하는 방법

van Gogh와 같은 초상화 페인트

증강 현실 마커를 코딩하는 방법

더블 퀵 퀵 타임으로 조각하기위한 5 가지 팁

웹 디자인 기관의 이름을 지정하는 방법

카테고리