文档章节

一个基于highcharts的angular小插件

i5--lou
 i5--lou
发布于 2016/07/11 14:34
字数 429
阅读 203
收藏 0

最近要频繁使用表格,然后就想到了在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,自己的表格插件就这么做好了,很好用哦

© 著作权归作者所有

共有 人打赏支持
i5--lou
粉丝 20
博文 72
码字总数 33811
作品 0
杭州
程序员
私信 提问
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
Highcharts-ng —— AngularJS 的图表扩展

Highcharts-ng 是一个 AngularJS 的指令扩展,实现了在 AngularJS 应用中集成 Highcharts 图表库的功能。

oschina
2015/05/20
31
0
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
6.8K
22
Highcharts React、Angular 官方扩展包发布

为了方便用户在不同的框架中使用 Highcharts,我们针对目前市面上最流行的前端框架 React、Angular 进行封装并正式对外发布。 Highcharts React 扩展包 项目地址:https://github.com/highch...

简数科技
2018/04/17
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

阿里巴巴的26款超神Java开源项目!

1.分布式应用服务开发的一站式解决方案 Spring Cloud Alibaba Spring Cloud Alibaba 致力于提供分布式应用服务开发的一站式解决方案。此项目包含开发分布式应用服务的必需组件,方便开发者通...

DemonsI
25分钟前
13
0
matlab-线性代数 判断 det 矩阵是否可逆

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   code clearclc% 输入需要......

志成就
26分钟前
0
0
mysql 证明为什么用limit时,offset很大会影响性能

本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/117 首先说明一下MySQL的版本: mysql> select version();+-----------+| version() |+-----------+|......

tantexian
33分钟前
7
0
你要的JMeter压力测试教程及结果分析

一、测试工具: JMeter 二、JMeter介绍: Apache JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域。 三、J...

孟飞阳
35分钟前
1
0
css中内容溢出的处理

一.内容溢出时一般显示成省略号的形式。 主要属性设置:1.父级:确定width:number,overflow:hidden ; text-overflow:ellipsise 2.内容:white-wrape:norape; 二:当内容溢出不做特殊处理时,...

hezhongjie
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部