Angular-Chart.js

Angular-Chart.js

Installation

1
添加引用
angular.min.js
2
添加引用
Chart.min.js
3
添加引用
angular-chart.min.js
4
angular.module('myModule', ['chart.js']);
5
<link rel="stylesheet" href="lib/angular-chart.js/dist/angular-chart.css">
END

1
Markup
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick" ></canvas>
2
JS
.controller("LineCtrl", function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
});
3
效果
END

1
Markup
<canvas id="bar" class="chart chart-bar" chart-legend="true"
chart-data="data" chart-labels="labels" chart-series="series">
</canvas>
2
JS
.controller("BarCtrl", function($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});
3
效果
END

1
Markup
<canvas id="doughnut" class="chart chart-doughnut" chart-legend="true"
chart-data="data" chart-labels="labels">
</canvas>
2
JS
.controller("DoughnutCtrl", function($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];
});
3
效果
END

1
Markup
<canvas id="radar" class="chart chart-radar" chart-legend="true"
chart-data="data" chart-labels="labels">
</canvas>
2
JS
.controller("RadarCtrl", function($scope) {
$scope.labels = ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
];
});
3
效果
END

经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。

作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。

展开阅读全部