在 AngularJS 中製作餅圖

Rana Hasnain Khan 2022年5月31日
在 AngularJS 中製作餅圖

本文將通過示例介紹 AngularJS 中的餅圖及其工作原理。

在 AngularJS 中製作餅圖

在許多情況下,我們可能必須在應用程式中使用或顯示圖表來展示資料。為此,AngularJS 為我們提供了一些可以使用的庫,我們將詳細討論。

圖表庫是 JavaScript chart.js 庫的 AngularJS 版本。AngularJS 圖表是基於 HTML5 的圖表庫,可在畫布 HTML5 元素上製作圖表。

AngularJS 圖表是 JavaScript 中輕量級且著名的圖表庫。angular_chart.js 的主要亮點是響應式、反應式和支援 HTML5 的圖表庫。

我們可以通過應用 chart.js 庫為 AngularJS 製作有吸引力的圖表。AngularJS 圖表是 Chart.js 的原生​​ Angular 指令。

這些是以下所需的依賴項:

  • AngularJS(用 1.2.x、1.3.x 和 1.4.x 測試,儘管它可能適用於以前的版本)
  • Chart.js (需要 Chart.js 1.0, 使用版本 1.0.1 和 1.0.2 檢查)

現在,我們可以藉助示例來解釋 Angular 中的餅圖。

讓我們建立一個新的 AngularJS 應用程式來檢視指令示例。首先,我們將使用 script 標籤新增 AngularJS 庫。

# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

現在我們將使用 ng-app 定義 AngularJS 應用程式。

# AngularJs
<body ng-app="">
   ...
</body>

首先,我們將包含 AngularJS 圖表的所有依賴檔案。

# Angular

<script src="/angular/angular.min.js"></script>
  <script src="/Chart.js/Chart.min.js"></script>
  <script src="/angular-chart.js/dist/angular-chart.min.js"></script>
   <link rel="stylesheet" href="/angular-chart.js/dist/angular-chart.css">

現在,我們將依賴注入到 AngularJS 模組中。

# Angular

angular.module("ngApp", ["chart.js"])

現在,我們將為餅圖定義資料和標籤。我們必須將 ChartLabels 陣列中的所有標籤和資料分配到 ChartData JavaScript 陣列中。

並確保標籤和資料系列不會衝突。

# Angular

$scope.chartLabels = ['List A', 'List B', 'List C'];
$scope.chart-data = [55, 69, 10];

我們現在將在 HTML 檔案中定義 Chart 目錄並將模型分配給它。

# Angular

<canvas id="pie" class="chart chart-pie" chart-data="chart-data" chart-labels="labels" legend="true">
</canvas>

有時我們需要對餅圖切片的點選執行一些操作,所以下面的程式碼將幫助獲取餅圖的點選切片值。

# Angular

chart-click="onClickdisplay"
$scope.onClickdisplay = function (points, evt) {
          console.log(points);
        };

輸出:

Angular 餅圖

從上面的例子可以看出,我們可以使用 chart.js 庫輕鬆建立餅圖。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn