一个基于highcharts的angular小插件

最新推荐文章于 2025-09-07 22:13:39 发布

转载最新推荐文章于 2025-09-07 22:13:39 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/codingBingo/blog/709598

文章标签：

#javascript #python #ViewUI

本文介绍如何在Angular项目中创建自定义Highcharts插件，以减少代码重复并简化图表展示过程。通过定义HTML结构、配置app.js及实现directive，可以轻松实现图表功能。

2019独角兽企业重金招聘Python工程师标准>>>

最近要频繁使用表格,然后就想到了在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://my.oschina.net/codingBingo/blog/709598