一. 添加基本配置

  1. 添加指令

angular.module('newApp')
.directive('dpHighchart', ['$rootScope', function($rootScope){
return {
restrict: 'E',
scope: {
chartConfig: "="
},
link: function ($scope, element, $attr) {
$scope.$watch('chartConfig', function (newValue, oldValue) {
if (newValue) {
$(element).highcharts($scope.chartConfig);
}
});
}
}
}])

  2. 添加CSS样式

dp-highchart {
display: block;
}

二. 使用方法

  1. html中添加一行。

<dp-highchart chart-config="chartConfig1"></dp-highchart>

  2. JS中添加一句。

  $scope.chartConfig1 = object(chart配置对象);

Angularjs中添加HighCharts的更多相关文章

  1. Angularjs中添加ckEditor插件

    使用方法看注释.主要解决帮上ngModel的问题 angular.module('newApp') .directive('ckeEditor', function() { return { /* F ...

  2. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  3. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  4. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  5. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

  6. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  7. 在AngularJs中怎么设置请求头信息(headers)及不同方法的比较

    在AngularJS中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/s ...

  8. 【Openlayers3】在地图上添加highcharts图表

    今天试用了一下ol3,效果很是不错! ol3中有个ol.Overlay,使用这个类我们可以在地图中添加各种html要素. 下面我们在地图中添加一个饼图 html中添加一个div容器: <div ...

  9. AngularJS中的指令

    欢迎大家讨论与指导 : )  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...

随机推荐

  1. Shape Drawable Resources

    1,示例 它们的代码如下: shape_oval.xml <?xml version="1.0" encoding="utf-8"?> <sh ...

  2. js实现浮动框跟随页面滚动,最后停留在原来位置

    左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...

  3. python自动化--语言基础线程、生产者消费者示例

    进程与线程的区别:进程不共享空间,线程共享地址空间 线程共享空间优缺点:优点:多线程给用户的体验好些,打开时占用的内存比进程少缺点:共享地址空间会相互干扰,甚至有影响 import threading ...

  4. servU服务器连接不上问题的解决

    在服务器上安装了servU64位版,建立了用户,设置了防火墙,正常启动. 但在客户端发出FTP://服务器IP 命令后,弹出输入用户名和密码的对话框,输入正确的用户名和密码后,却始终连接不上. ftp ...

  5. QQ应用前景与范围文档

    QQ软件 前景与范围文档       当前版本: 版本1 作   者: 李飞 完成日期: 2013年11月3日 1.  业务需求 1.1 应用背景 20世纪后期网络的应用和21世纪的飞速发展,网络已经 ...

  6. 接口与抽象类的区别-Java

    概念-抽象类: 类是对某一个对象的具体描述,抽象类则是对有共通之处的对象,描述共通之处的类;包含抽象方法的类一定的抽象类,抽象类并不一定包含抽象方法;抽象类中可以有数据成员,但数据成员必须是stati ...

  7. 关于c++11中static类对象构造函数线程安全的验证

    在c++11中,static静态类对象在执行构造函数进行初始化的过程是线程安全的,有了这个特征,我们可以自己动手轻松的实现单例类,关于如何实现线程安全的单例类,请查看c++:自己动手实现线程安全的c+ ...

  8. CAD使用GetXData读数据(网页版)

    主要用到函数说明: MxDrawEntity::GetXData 返回实体的扩展数据. js代码实现如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  9. vue+axios上传文件

    单独上传文件: <input class="file" name="file" type="file" accept="im ...

  10. nginx平滑升级实战

    Nginx 平滑升级 1.查看旧版Nginx的编译参数 [root@master ~]# /usr/local/nginx/sbin/nginx -V [root@master ~]# ll ngin ...