Angularjs中添加HighCharts
一. 添加基本配置
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的更多相关文章
- Angularjs中添加ckEditor插件
使用方法看注释.主要解决帮上ngModel的问题 angular.module('newApp') .directive('ckeEditor', function() { return { /* F ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- 初次使用AngularJS中的ng-view,路由控制
AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 在AngularJs中怎么设置请求头信息(headers)及不同方法的比较
在AngularJS中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/s ...
- 【Openlayers3】在地图上添加highcharts图表
今天试用了一下ol3,效果很是不错! ol3中有个ol.Overlay,使用这个类我们可以在地图中添加各种html要素. 下面我们在地图中添加一个饼图 html中添加一个div容器: <div ...
- AngularJS中的指令
欢迎大家讨论与指导 : ) 前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
随机推荐
- 通信协议------Http、TCP、UDP
CP HTTP UDP: 都是通信协议,也就是通信时所遵守的规则,只有双方按照这个规则“说话”,对方才能理解或为之服务. TCP HTTP UDP三者的关系: TCP/IP是个协议组, ...
- [ USACO 2010 FEB ] Slowing Down
\(\\\) \(Description\) 给出一棵 \(N\) 个点的树和 \(N\) 头牛,每头牛都要去往一个节点,且每头牛去往的点一定互不相同. 现在按顺序让每一头牛去往自己要去的节点,定义一 ...
- js 获取json数组里面数组的长度
作为一个前端页面开发者第一次处理json数据,遇到了‘js 获取json数组里面数组的长度’?竟然不知道 json没有.length属性(真是要嘲讽下自己),少壮不努力老大徒伤悲啊!以前都是去寻求男朋 ...
- 下载github项目
两种方法:通过https或者ssh地址 找一个放置项目的文件夹,右键git bash here 输入 $ git clone https://项目地址 通过https 项目地址可以直接复制网页地址,或 ...
- acm练习-day1
描述现在,有一行括号序列,请你检查这行括号是否配对.输入第一行输入一个数N(0<N<=100),表示有N组测试数据.后面的N行输入多组输入数据,每组输入数据都是一个字符串S(S的长度小于1 ...
- python学习笔记(3)——进制符号&转换公式
进制转换法则: 进制符号 bin().oct().hex().int('',进制)+待转格式数 10进制→其他进制 # dec2bin # 十进制 to 二进制: bin() >>> ...
- apache启动失败提示预期<IfModule>结果<IfModule>>
经过反复查看httpd.conf文件,发现原因是启动了两遍<IfModule>,也就是出现内容重复标签重复曾经遇到类似的情况Apache2: Expected </> but ...
- Python游戏开发:pygame游戏开发常用数据结构
一.数组与列表 数组可以理解为简化的列表.像我们之前使用的pygame.sprite.Group这样的精灵组,也是一个列表.列表的元素是可变的,它具有添加.删除.搜索.排序等多种方法. 1.一维列表 ...
- 并发编程学习笔记(8)----ThreadLocal的使用及源码分析
1. ThreadLocal的理解 ThreadLocal,顾名思义,就是线程的本地变量,ThreadLocal会为每个线程创建一个本地变量副本,使得使用ThreadLocal管理的变量在多线程的环境 ...
- ThinkPHP---TP功能类之公文管理功能2----------继续完善
[前言] 之前已经完成了公文的添加和列表展示功能,今天继续完善.做下公文的编辑和删除功能. [主体] (1)分析 控制器:DocController.class.php 方法:edit(将模板展示和数 ...