Tạo biểu đồ tương tác trong Ionic 2

Sep 11, 2025

Cách

Khi bạn làm việc trong một nhóm nhỏ, nó có xu hướng khó viết và duy trì mã riêng biệt cho Android, iOS và Windows. Đó là nơi các khung lai giống như Ionic vào bức tranh. Họ không chỉ cho phép chúng tôi viết một đoạn mã duy nhất có thể được sử dụng trên cả ba nền tảng, mà có nghĩa là chúng tôi có thể làm như vậy bằng cách sử dụng ngăn xếp công nghệ hiện tại của chúng tôi.

Trong hướng dẫn này, chúng tôi sẽ khám phá cách giải quyết một nhiệm vụ chung như trực quan dữ liệu trong Ionic 2, một trong những khung ứng dụng hybrid hứa hẹn nhất ngoài kia. Tôi sẽ sử dụng thư viện biểu đồ JavaScript FusionCharts (FusionCharts.com), cho dự án này vì nó cung cấp một thư viện lớn gồm hơn 90 biểu đồ, tương thích với mọi thiết bị và trình duyệt và rất dễ làm việc.

Thiết lập ion 2

Để phát triển ứng dụng với Ionic 2, bạn cần Node.js phiên bản 4+ và NPM đang chạy trên HĐH của bạn. Bạn có thể tải xuống gói Node.js từ nodejs.org/en/voad. và NPM sẽ được cài đặt cùng với nó. Nếu bạn đã có một phiên bản Node.js khác và cũng muốn chạy phiên bản 4+, bạn có thể làm điều đó thông qua Trình quản lý phiên bản nút. .

Tiếp theo, bạn cần cài đặt ion 2 beta bằng NPM. Để làm điều này, chạy Cài đặt NPM -G Ionic @ beta Trong thiết bị đầu cuối của bạn từ tài khoản người dùng với quyền root (chúng tôi đang cài đặt mô-đun trên toàn cầu). Để mô phỏng ứng dụng ion, chúng tôi đang tạo nhiều nền tảng, chúng tôi cần thêm một mô-đun nút: Cordova. . Bạn có thể cài đặt này trên toàn cầu bằng cách sử dụng Cài đặt NPM -G Cordova .

Chúng tôi đã sẵn sàng để tạo ứng dụng ion đầu tiên của chúng tôi. Tuy nhiên, với thiết lập này, chúng tôi sẽ chỉ có thể xem ứng dụng trong trình duyệt. Để mô phỏng ứng dụng cho thiết bị iOS hoặc Android, chúng ta cần xây dựng mô-đun nền tảng cụ thể đó sang Cordova. Trong hướng dẫn này, chúng tôi sẽ xây dựng mô-đun iOS, vì vậy bạn cần chạy Nền tảng ion thêm iOS .

Cuối cùng, bạn cần cài đặt Xcode. Bạn sẽ tìm thấy hướng dẫn cho việc này đây .

Tạo một ứng dụng Ionic 2

Trong hướng dẫn này, chúng tôi sẽ tạo một ứng dụng Ionic 2 có tên 'Biểu đồ'. Chúng tôi sẽ tạo thư mục 'biểu đồ' trong thư mục làm việc hiện tại của bạn và bootstrap ứng dụng với một ứng dụng mẫu. Ứng dụng mẫu sẽ chứa một trang cơ bản, như được mô tả ở đây.

Để tạo ứng dụng này, hãy chạy Biểu đồ bắt đầu ion --v2 Trong thư mục làm việc hiện tại ( Biểu đồ. là tên của ứng dụng và --v2. Nói Ionic Chúng tôi muốn tạo một ứng dụng Ionic 2). Khi thực hiện lệnh này, một Biểu đồ. thư mục sẽ được tạo trong thư mục làm việc hiện tại. Để kiểm tra ứng dụng trong trình duyệt, hãy điều hướng đến Biểu đồ. thư mục và chạy. ion phục vụ . Điều này sẽ khởi chạy ứng dụng trong trình duyệt mặc định của bạn.

Thêm một trang mới

Bây giờ hãy thêm một trang / thành phần vào Biểu đồ. Ứng dụng sẽ tạo biểu đồ JavaScript. Đầu tiên, chúng tôi sẽ chỉ thêm một trang HTML đơn giản với 'Hello World' trong đó.

Trong Ionic 2, các trang có thể được thêm vào ứng dụng ion bằng cách sử dụng @Trang Trang trí (một mô-đun ion dựa trên các thành phần Angular 2), có quyền truy cập vào chức năng ion hoàn chỉnh. Một trang tối thiểu trần yêu cầu tệp HTML mẫu (chứa đánh dấu) và tệp JavaScript (chứa logic cần thiết). Bạn có thể tìm thêm chi tiết về các trang ion đây .

Để tạo trang, chúng tôi sẽ thêm Donut-stror.js. và Donut-chart.html. tập tin đến Biểu đồ / ứng dụng / trang Donut-Sơ đồ danh mục. Trong tệp HTML, chúng ta có thể thêm mã để điều hướng ứng dụng và tiêu đề 'Xin chào thế giới' đơn giản:

 & lt; ion-Navbar * Navbar & GT;
& lt; nút Menutoggle & GT;
  & lt; ion-biểu tượng tên = "menu" & gt; & lt; / ion-icon & gt;
& lt; / nút & gt;
& lt; ion-title & gt; xin chào ion & lt; / ion-title & gt;
& lt; / ion-Navbar & GT;

& lt; ion-content & gt;
  & lt; h1 & gt; xin chào thế giới & lt; / div & gt;
& lt; / ion-content & gt;

Trong tệp JavaScript, chúng tôi tham chiếu tệp HTML được tạo dưới dạng mẫu cho thành phần này. Vì chúng tôi không làm bất cứ điều gì lạ mắt, chúng tôi chỉ có thể thêm một hàm tạo trống Biểu đồ. .

 Nhập {trang} từ 'ion-angular';

@Trang({
  templateurl: 'build / pages / pie-sket / pie-chart.html'
})

Biểu hiện lớp xuất khẩu {
  constructor() {
  Không thể
}

Chúng tôi đã tạo ra một thành phần độc lập; Bây giờ chúng ta cần liên kết điều này vào ứng dụng chính. Để làm điều này, chúng ta cần tham chiếu thành phần mà chúng ta đã tạo trong app.js. tập tin trong thư mục ứng dụng và sử dụng thành phần trong trang. tài sản của hàm tạo thành phần ứng dụng.

 Nhập {chartspage} từ './pages/donut-chart/donut-chart'

Constructor (ứng dụng, nền tảng, menu) {
    // hàm tạo ứng dụng mặc định
    this.app = ứng dụng;
    cái này.platform = platform;
    menu này.menu =;
    this.initializepp ();
    // Đặt trang của ứng dụng của chúng tôi - chúng tôi đang thêm biểu đồ Donut tại đây
    cái này = [
      {Tiêu đề: 'Chào mừng', thành phần: helloionicpage},
      {Tiêu đề: 'Biểu đồ bánh rán', thành phần: biểu đồ}
    ];

    // thực hiện trang nội dung trang gốc (hoặc đầu tiên) - Bước mặc định
    Điều này .rootpage = helloionicpage;
}

Sau khi thực hiện các thay đổi này, ứng dụng ion trong trình duyệt sẽ tự động tải lại (hoặc sử dụng ionic phục vụ từ thiết bị đầu cuối). Bây giờ, một liên kết mới sẽ được hiển thị trong menu bên của ứng dụng và nhấp vào đó, bạn sẽ thấy 'Xin chào thế giới' được viết trên màn hình.

Tạo biểu đồ JavaScript

Bây giờ là lúc để sửa đổi trang 'xin chào thế giới' của chúng tôi để tạo biểu đồ bánh rán. Để có thể sử dụng thư viện FusionCharts, trước tiên chúng ta cần bao gồm fusioncharts.js. và fusioncharts.charts.js. tập tin trong www / index.html. tập tin.

Mẹo nhanh: Nếu cả hai tệp đều nằm trong cùng một thư mục, sau đó thêm vào fusioncharts.js. sẽ đủ, vì điều này sẽ tự động bao gồm fusioncharts.charts.js. .

 & lt; script type = "văn bản / javascript" src = "path / to / fusioncharts.js" & gt; & lt; / script & gt;

Bây giờ chúng tôi sẽ sửa đổi HTML từ bước trước để tạo một bộ chứa biểu đồ:

 & lt; div id = "chart-container" & gt; & lt; / div & gt;

Trong hàm tạo trong Donut-stror.js. , mà chúng tôi đã tạo ở trên, chúng tôi cần thêm mã sau để tạo biểu đồ bên trong bộ chứa biểu đồ:

 FusionCharts. Đã (Chức năng () {
  var revenuechart = New FusionCharts ({
    Loại: 'Dought2D',
    renderat: 'Chart-Container',
    Chiều rộng: '100%',
    Chiều cao: '450',
    DataFormat: 'JSON',
    nguồn dữ liệu: {
      "đồ thị": {
        "Chú thích": "Chia doanh thu theo danh mục sản phẩm",
        "Subcaption": "Năm ngoái",
        "NumberPrefix": "$",
        "Palettecolors": "# 0075c2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // Thêm thuộc tính biểu đồ
      },
      "dữ liệu": [{
          "Nhãn": "Thực phẩm",
          "Giá trị": "28504"
        } // nhiều dữ liệu hơn
      Của
    Không thể
  }). Render ();
});

Trong mã này, chúng tôi đang tạo một biểu đồ mới thông qua hàm tạo của FusionCharts. Các thuộc tính được sử dụng được giải thích ngắn gọn dưới đây:

kiểu Xác định loại biểu đồ

renderat. là id của container nơi chúng ta muốn hiển thị biểu đồ

chiều rộng và Chiều cao được sử dụng để đặt kích thước biểu đồ

DataFormat. là định dạng trong đó chúng ta sẽ cung cấp dữ liệu biểu đồ (bạn có thể sử dụng JSON cũng như XML)

nguồn dữ liệu Chứa mỹ phẩm biểu đồ bên trong FusionCharts đồ thị đối tượng và dữ liệu thực tế được vẽ bên trong dữ liệu mảng

Mặc dù tôi chỉ có bốn thuộc tính trong đồ thị Đối tượng, có hơn một trăm người khác bạn có thể sử dụng để cải thiện thiết kế biểu đồ của mình. Bạn có thể đọc thêm về điều đó đây .

Khi mã này được thêm vào, hãy chạy ion phục vụ để khởi chạy lại ứng dụng. Bạn sẽ thấy liên kết 'biểu đồ donut' trong menu bên cạnh của bạn. Nếu bạn theo dõi tất cả các bước của mình đúng cách, khi bạn nhấp vào liên kết đó, bạn sẽ thấy một biểu đồ bánh rán! Nếu không, vui lòng tham khảo mã trên GitHub repo cho dự án này để xem nơi bạn đã đi sai.

Lưu ý: Sau khi kiểm tra nó trong trình duyệt, hãy sử dụng Ionic mô phỏng ios. Để tải ứng dụng của bạn trong trình giả lập iOS.

Tổng hợp

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Biểu đồ bánh rán của chúng tôi đại diện cho sự phân chia doanh thu của một công ty giả định bởi các loại sản phẩm

Như bạn đã thấy, không khó để bắt đầu trực quan dữ liệu trong Ionic 2. Mặc dù tôi vừa thực hiện biểu đồ Donut đơn giản để chứng minh quy trình, có thể tạo các biểu đồ phức tạp với nhiều bộ dữ liệu bằng cách sử dụng cùng một quy trình . Điều duy nhất bạn cần tìm ra là định dạng mà FusionCharts chấp nhận dữ liệu cho loại biểu đồ cụ thể đó. Khi bạn có thể làm điều đó, bạn sẽ có thể thực hiện bất kỳ biểu đồ nào từ thư viện.

Nếu bạn cần bất kỳ trợ giúp với chủ đề này hoặc nếu bạn có bất kỳ câu hỏi nào về nội dung của hướng dẫn này, hãy thoải mái bắt tôi trên Twitter .Tôi luôn sẵn lòng giúp đỡ!

Bài viết này ban đầu xuất hiện trong Tạp chí Net. phát hành 283; Mua nó ở đây .

Tạo biểu đồ tương tác trong Ionic 2

Thiết lập ion 2

Tạo một ứng dụng Ionic 2

Thêm một trang mới

Tạo biểu đồ JavaScript

Tổng hợp

Cách - Các bài báo phổ biến nhất

Lưu trữ đám mây cho ảnh và hình ảnh: Cách chọn đám mây tốt nhất cho công việc của bạn

Cách Photoshop trên iPhone (Có, đó là một điều)

Sử dụng Framer X để xây dựng các nguyên mẫu tương tác

Cách kitbash khi đang di chuyển với Shapr3D

Làm thế nào để vẽ một con mèo

Cách xây dựng một trang blog với Gatsby

Tạo một bàn chải lưới dịch chuyển vector

Cách tạo tóc trong rạp chiếu phim 4D

Thể loại