# 前端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.命令使用