简介
angular-charts 是一个基于 AngularJS 的图表可视化工具库。通过使用该 npm 包，您可以轻松地在您的 AngularJS 应用程序中添加各种类型的图表。
安装
安装 angular-charts 最简单的方法是使用 npm 命令：
npm install angular-charts --save
该命令将下载 angular-charts 并将其添加到您的 package.json 文件中的依赖项列表中。
使用
要在您的 AngularJS 应用程序中使用 angular-charts，请首先在您的 HTML 中包含 Chart.js 和 angular-charts 的脚本文件：
<!-- 引入 Chart.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <!-- 引入 angular-charts --> <script src="node_modules/angular-charts/dist/angular-charts.min.js"></script>
接下来，在您的 AngularJS 模块中注入 'angularCharts' 依赖项，并将其添加到您的控制器中：
// javascriptcn.com 代码示例
angular.module('myApp', ['angularCharts'])
.controller('myCtrl', function ($scope) {
$scope.chartData = [
{ "name": "John", "score": 80 },
{ "name": "Jane", "score": 90 }
];
$scope.chartConfig = {
"title": "Angular Chart",
"type": "bar",
"data": $scope.chartData,
"labels": true
};
});最后，在您的 HTML 中添加以下代码以显示图表：
<div ng-controller="myCtrl">
<div ac-chart="chartConfig"></div>
</div>示例
下面是一个完整的示例，它演示了如何在 AngularJS 应用程序中使用 angular-charts 绘制柱形图：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Charts Example</title>
<!-- 引入 Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<!-- 引入 angular 和 angular-charts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="node_modules/angular-charts/dist/angular-charts.min.js"></script>
<script>
// 定义 AngularJS 模块和控制器
angular.module('myApp', ['angularCharts'])
.controller('myCtrl', function ($scope) {
$scope.chartData = [
{ "name": "John", "score": 80 },
{ "name": "Jane", "score": 90 }
];
$scope.chartConfig = {
"title": "Angular Chart",
"type": "bar",
"data": $scope.chartData,
"labels": true
};
});
</script>
</head>
<body>
<div ng-controller="myCtrl">
<div ac-chart="chartConfig"></div>
</div>
</body>
</html>当您运行这个示例时，您将看到一个简单的柱形图，它显示了两个人的得分。您可以尝试更改数据并使用不同类型的图表来扩展此示例。
结论
通过使用 angular-charts npm 包，您可以轻松地在您的 AngularJS 应用程序中添加各种类型的图表。只需遵循上述步骤，并使用示例代码作为起点，您就可以开始创建自己的图表并向您的用户提供有意义的可视化数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35386