# 前端hightchart.js分析
openstack里的CPU、硬盘等性能监控图形，是使用hightchart.js这个插件实现的。这里学习是如果将angularjs与hightchart结合在一起。
下面给出一个 angularjs 封装D atepicker 的例子。
Datepicker\scripts\directives\directives.js：
~~~
angular.module('myApp.directives', [])
.directive('datepicker', function(){
return {
// Enforce the angularJS default of restricting the
// directive to attributes only
restrict: 'A',
// Always use along with an ng-model
require : '?ngModel',
scope : {
// This method needs to be defined and
// passed in to the directive from the view controller
select : '&' // Bind the select function we refer to
// right scope
},
link : function(scope, element, attrs, ngModel){
if (!ngModel) return;
var optionsObj = {};
optionsObj.dateFormat = 'mm/dd/yy';
// 更新模型数据
var updateModel = function(dateTxt){
scope.$apply(function(){
// Call the internal AngularJS helper to
// update the two-way binding
ngModel.$setViewValue(dateTxt);
});
}
optionsObj.onSelect = function(dateTxt, picker){
updateModel(dateTxt);
if (scope.select){
scope.$apply(function(){
scope.select({date: dateTxt});
});
}
}
ngModel.$render = function() {
// Use the AngularJS internal 'binding-specific' variable
element.datepicker('setDate', ngModel.$viewValue || '');
}
element.datepicker(optionsObj);
}
}
});
function test(){
$("#testDatepicker").datepicker({
onselect: function (dateText, inst) {//选中事件
console.log("onselect, dateText", dateText);
console.log("onselect, inst", inst);
},
beforeShow: function (input) {//日期控件显示面板之前
console.log("beforeShow, input", input);
},
onClose: function (dateText, inst) {//当日期面板关闭后触发此事件（无论是否有选择日期）
console.log("onClose, dateText", dateText);
console.log("onClose, inst", inst);
}
});
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
dateFormat: 'yy-mm-dd', firstDay: 1,
isRTL: false
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
}
~~~
Datepicker\scripts\controllers\controllers.js：
~~~
var app = angular.module('myApp', ['myApp.directives']);
app.controller('MainCtrl', function($scope){
$scope.myText = 'Not Selected';
$scope.currentDate = '';
$scope.updateMyText = function(date){
$scope.myText = 'Selected';
}
});
~~~
Datepicker\index.html
~~~
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>jQuery Datepicker</title>
<script src="./scripts/vender/jquery.min.js"></script>
<script src="./scripts/vender/jquery-ui.js"></script>
<script src="./scripts/vender/angular.js"></script>
<link rel="stylesheet" href="./css/jquery-ui.css" >
<script src="./scripts/directives/directives.js"></script>
<script src="./scripts/controllers/controllers.js"></script>
</head>
<body ng-controller="MainCtrl">
<input datepicker ng-model="$parent.currentDate" select="updateMyText(date)"><br/>
{{myText}}-{{currentDate}}
</body>
<script type="text/javascript">
</script>
</html>
~~~
- 1.概述
- 2.CSS样式引入
- 2.1 My Themes
- 2.2 Horizon
- 2.3 Angular
- 2.4 HORIZON_CONFIG.scss_files
- 2.5 Custom Styles
- 3. JS文件引入
- 31. iframe_embed_settings 标签
- 3.2 horizon/_conf.html
- 3.3 _script_loader.html
- 3.4 _custom_head_js.html
- 3.5 horizon/_scripts.html
- 4. 主题替换
- 4.1 ACE主题
- 4.2 引入ACE主题的CSS样式
- 4.3 引入ACE主题的JS文件
- 4.4 收集和压缩
- 4.5 总结
- 4.6 错误与冲突收集
- 5.错误修正
- 6.openstack里所有功能浏览
- 7.前端hightchart.js分析
- 8.命令使用