AngularJS - 圖表應用程式

Hello, 有志者！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 和圖表應用程式的世界。作為你們友善的鄰居計算機科學老師，我非常高興能夠引導你們進行這次冒險。別擔心你們是編程新手——我們會從基礎開始，逐步學習。所以，來一杯咖啡（或是你們最喜歡的飲料），讓我們一起投入這個領域！

AngularJS - Chart Application

AngularJS 是什麼？

在我們開始創建圖表之前，讓我們了解一下 AngularJS 是什麼。想像你正在蓋房子。AngularJS 就像幫助你高效結構化房子的框架。它是一個基於 JavaScript 的開源前端網頁應用程式框架，讓創建動態的單頁應用程式變得更加容易。

AngularJS 的關鍵特性

特性	描述
兩向數據綁定	自動同步模型和視圖之間的數據
依賴注入	有助於使組件具有重用性、可維護性和可測試性
指令	讓你可以使用自定義屬性和元素來擴展 HTML
模板	使用帶有特殊標記的 HTML 作為模板
MVC 架構	遵循 Model-View-Controller 模式以進行更好的組織

設置我們的圖表應用程式

現在我們對 AngularJS 有了基本的了解，讓我們設置我們的圖表應用程式。我們將使用一個名為 Chart.js 的庫，與 AngularJS 一起創建有吸引力、響應式的圖表。

步驟 1：引入必要的文件

首先，我們需要在 HTML 文件中引入 AngularJS 和 Chart.js。在你的 HTML 的 <head> 標籤中添加以下代碼：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

步驟 2：創建 AngularJS 模組

現在，讓我們創建我們的 AngularJS 模組。在你的 JavaScript 文件中，添加：

var app = angular.module('chartApp', []);

這一行創建了一個名為 'chartApp' 的 AngularJS 模組。把它想像成為我們的圖表製作冒險創建一個新的食譜書！

創建我們的第一個圖表

興奮地想要看到一些視覺魔法嗎？讓我們創建我們的第一個圖表——一個簡單的柱狀圖，顯示編程語言的流行程度。

步驟 1：設置 HTML

在你的 HTML 文件中，添加以下代碼：

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

這會創建一個畫布元素，我們的圖表將在其中繪製。ng-app 和 ng-controller 指令將我們的 HTML 連接到 AngularJS 應用程式和控制器。

步驟 2：創建控制器

在你的 JavaScript 文件中，添加：

app.controller('ChartController', function($scope) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'],
datasets: [{
label: '編程語言的流行程度',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});

哇，這可是很多代碼！但別擔心，我們來分解一下：

我們創建了一個名為 'ChartController' 的控制器。
我們獲得了我們畫布元素的上下文。
我們創建了一個新的 Chart 對象，指定它是一個柱狀圖。
我們為圖表提供了數據，包括標籤和數據集。
我們為圖表設置了選項，例如 y 軸從零開始。

使我們的圖表動態化

靜態圖表很酷，但動態圖表更酷！讓我們修改我們的圖表，使其使用 AngularJS 范疇中的數據。

步驟 1：更新控制器

將你的控制器修改成如下：

app.controller('ChartController', function($scope) {
$scope.languages = ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'];
$scope.popularity = [12, 19, 3, 5, 2];

$scope.updateChart = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: $scope.languages,
datasets: [{
label: '編程語言的流行程度',
data: $scope.popularity,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
};

$scope.updateChart();
});

在這裡，我們將數據移動到了 $scope 變量中，並創建了一個 updateChart 函數。

步驟 2：添加用戶輸入

讓我們添加一些輸入字段，使用戶可以更新圖表數據：

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
<div ng-repeat="language in languages">
{{language}}: <input type="number" ng-model="popularity[$index]" ng-change="updateChart()">
</div>
</div>

現在，當你更改輸入字段中的數字時，圖表將自動更新！

結論

恭喜你們！你們剛剛使用 AngularJS 和 Chart.js 創建了你們的第一個動態圖表應用程式。我們今天學習了很多東西，從了解 AngularJS 的基礎到創建互動式圖表。

記住，精通編程就像學習烹飪一樣——它需要練習、嘗試和願意從錯誤中學習。所以不要害怕玩轉代碼，嘗試不同的圖表類型，或添加新功能。

在我多年的教學經驗中，我見過學生從完全的編程新手變得能夠創建有驚人之舉的應用程式。只要堅持不懈和好奇心，你很快就能夠創建有复雜、美麗的數據可視化了！

持續編程，持續學習，最重要的是，玩得開心！直到下一次，快樂地創作圖表！

Credits: Image by storyset