最近要频繁使用表格,然后就想到了在angular项目上自己做一个插件,不至于我每次都要自己写好多重复的highcharts定义,那么接下来就直接上代码,
首先当然是html的结构:
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>mycharts</title> <script src="/js/angular.min.js"></script> <script src="/js/jquery.min.js"></script> <script src="/js/highcharts.min.js"></script> <script src="/js/aap.js"></script> </head> <body ng-app="myApp"> <div class="myCtrl" ng-controller="myCtrl"> <my-chart></my-chart> </div> </body> </html>
这里注意一下,highcharts是依赖于jquery的,其他应该是没有什么问题啦
然后写入口文件app.js
angular.module('myApp').controller('myCtrl',['$scope',function($scope){
$scope.Data={};
$scope.Data.chartConfig = {//此处配置的信息是针对某表的详情信息
title:{//标题
text:"7天消费"
},yAxis:{//y轴信息
title:{
text:'金额'
},labels:{
format:'{value}$'
}
},xAxis:{//x轴信息
categories:["04-01","04-02","04-03","04-04","04-05","04-06","04-07"]
},series:[180,160,155,165,170,150,150]//数据表内容
}
}]);
然后就是directive的内容啦,再引入一个文件,路径为/directive/myChart.js
angular.module('myApp').directive('myChart',function(){
var obj = {
restrict:'AE',replace:true,template:'<div></div>',scope:{
config:'=',cWidth:'=',cHeight:'=',dWidth:'='
},link:function(scope,element){
element[0].style.width = scope.dWidth ? scope.dWidth + 'px' : '1000px';//默认元素宽度1000,同时支持自定义
setChart = function(){
var defaultOptions = {//所有图形的基础配置
chart:{
renderTo : element[0],//图形所在的元素
width : scope.cWidth || 1000//图形宽度
height : scope.cHeight || 600 //图形高度
}
};
config = angular.extend(defaultOption,scope.config);//新建图形的配置由新属性继承于基础配置
new HighCharts.Chart(config);//生成图形
};
//监视数据属性存在时,生成图形
scope.$watch("config.series",function(){
setChart()
});
}
};
return obj;
});
然后根据上面的配置,再修改一下html的结构
<my-chart config='Data.chartConfig'></my-chart>
ok,自己的表格插件就这么做好了,很好用哦
原文链接：https://www.f2er.com/angularjs/149209.html