一个基于highcharts的angular小插件

前端之家收集整理的这篇文章主要介绍了一个基于highcharts的angular小插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近要频繁使用表格,然后就想到了在angular项目上自己做一个插件,不至于我每次都要自己写好多重复的highcharts定义,那么接下来就直接上代码,

首先当然是html的结构:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>mycharts</title>
  6. <script src="/js/angular.min.js"></script>
  7. <script src="/js/jquery.min.js"></script>
  8. <script src="/js/highcharts.min.js"></script>
  9. <script src="/js/aap.js"></script>
  10. </head>
  11. <body ng-app="myApp">
  12. <div class="myCtrl" ng-controller="myCtrl">
  13. <my-chart></my-chart>
  14. </div>
  15. </body>
  16. </html>

这里注意一下,highcharts是依赖于jquery的,其他应该是没有什么问题啦

然后写入口文件app.js

  1. angular.module('myApp').controller('myCtrl',['$scope',function($scope){
  2. $scope.Data={};
  3. $scope.Data.chartConfig = {//此处配置的信息是针对某表的详情信息
  4. title:{//标题
  5. text:"7天消费"
  6. },yAxis:{//y轴信息
  7. title:{
  8. text:'金额'
  9. },labels:{
  10. format:'{value}$'
  11. }
  12. },xAxis:{//x轴信息
  13. categories:["04-01","04-02","04-03","04-04","04-05","04-06","04-07"]
  14. },series:[180,160,155,165,170,150,150]//数据表内容
  15. }
  16. }]);

然后就是directive的内容啦,再引入一个文件,路径为/directive/myChart.js

  1. angular.module('myApp').directive('myChart',function(){
  2. var obj = {
  3. restrict:'AE',replace:true,template:'<div></div>',scope:{
  4. config:'=',cWidth:'=',cHeight:'=',dWidth:'='
  5. },link:function(scope,element){
  6. element[0].style.width = scope.dWidth ? scope.dWidth + 'px' : '1000px';//默认元素宽度1000,同时支持自定义
  7. setChart = function(){
  8. var defaultOptions = {//所有图形的基础配置
  9. chart:{
  10. renderTo : element[0],//图形所在的元素
  11. width : scope.cWidth || 1000//图形宽度
  12. height : scope.cHeight || 600 //图形高度
  13. }
  14. };
  15. config = angular.extend(defaultOption,scope.config);//新建图形的配置由新属性继承于基础配置
  16. new HighCharts.Chart(config);//生成图形
  17. };
  18. //监视数据属性存在时,生成图形
  19. scope.$watch("config.series",function(){
  20. setChart()
  21. });
  22. }
  23. };
  24. return obj;
  25. });

然后根据上面的配置,再修改一下html的结构

  1. <my-chart config='Data.chartConfig'></my-chart>

ok,自己的表格插件就这么做好了,很好用哦

猜你在找的Angularjs相关文章