FusionCharts AngularJS 项目教程
1. 项目的目录结构及介绍
FusionCharts AngularJS 项目的目录结构如下:
angularjs-fusioncharts/
├── demos/
├── dist/
├── example/
├── grunt-tasks/
├── js/
│ └── demos/
├── src/
├── .gitignore
├── .npmignore
├── Gruntfile.js
├── LICENSE.md
├── README.md
├── karma.conf.js
├── package.json
目录介绍
- demos/: 包含项目的演示示例。
- dist/: 包含构建后的文件。
- example/: 包含示例代码。
- grunt-tasks/: 包含 Grunt 任务配置。
- js/demos/: 包含 JavaScript 演示示例。
- src/: 包含项目的源代码。
- .gitignore: Git 忽略文件配置。
- .npmignore: NPM 忽略文件配置。
- Gruntfile.js: Grunt 构建工具配置文件。
- LICENSE.md: 项目许可证文件。
- README.md: 项目说明文件。
- karma.conf.js: Karma 测试配置文件。
- package.json: 项目依赖和脚本配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 example/index.html
和 example/app.js
。
example/index.html
这是项目的入口 HTML 文件,包含了 AngularJS 和 FusionCharts 的库引用,以及 AngularJS 应用的启动代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FusionCharts AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/angularjs-fusioncharts.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div fusioncharts width="600" height="400" type="column2d" datasource="{{myDataSource}}"></div>
</div>
</body>
</html>
example/app.js
这是 AngularJS 应用的主要 JavaScript 文件,定义了应用模块、控制器以及数据源。
var app = angular.module('myApp', ['ng-fusioncharts']);
app.controller('MyController', ['$scope', function($scope) {
$scope.myDataSource = {
chart: {
caption: "Monthly Revenue",
subCaption: "Last year",
xAxisName: "Month",
yAxisName: "Revenue (In USD)",
numberPrefix: "$",
theme: "fusion"
},
data: [
{label: "Jan", value: "420000"},
{label: "Feb", value: "810000"},
{label: "Mar", value: "720000"},
{label: "Apr", value: "550000"},
{label: "May", value: "910000"},
{label: "Jun", value: "510000"},
{label: "Jul", value: "680000"},
{label: "Aug", value: "620000"},
{label: "Sep", value: "610000"},
{label: "Oct", value: "490000"},
{label: "Nov", value: "900000"},
{label: "Dec", value: "730000"}
]
};
}]);
3. 项目的配置文件介绍
Gruntfile.js
这是 Grunt 构建工具的配置文件,用于自动化任务,如代码压缩、测试等。