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程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
随机推荐
- .net引用System.Data.SQLite操作SQLite
之所以要做这个笔记,是因为在.NET中使用System.Data.SQLite的时候,遇到了些问题,这些问题是相对于引用其他dll没有遇到过的,所以作个笔记,记录一下. 简单起见,首先建立一个控制台项 ...
- 转 MySQL数据库基础
http://lib.csdn.net/article/mysql/57883 1 数据库基础 一.数据库与数据库管理系统 1.数据库(DB):存放数据的仓库,从广义来说,数据不仅包括数字,还包括了文 ...
- log4net 简易封装
using log4net; using log4net.Appender; using log4net.Config; using log4net.Core; using log4net.Layou ...
- [ POI 2012 ] Letters
\(\\\) \(Description\) 给出两个长度为 \(N\) 的字符串\(S_1,S_2\),且保证两个字符串中每一个字符出现次数相同. 现在一次操作可以交换相邻的两个字符,问将 \(S_ ...
- P1044 栈
题目背景 栈是计算机中经典的数据结构,简单的说,栈就是限制在一端进行插入删除操作的线性表. 栈有两种最重要的操作,即pop(从栈顶弹出一个元素)和push(将一个元素进栈). 栈的重要性不言自明,任何 ...
- 06使用NanoPiM1Plus在Android4.4.2下接U盘
06使用NanoPiM1Plus在Android4.4.2下接U盘 大文实验室/大文哥 壹捌陆捌零陆捌捌陆捌贰 21504965 AT qq.com 完成时间:2017/12/5 17:51 版本:V ...
- python语言真正的奥义所在--对接32单片机
2018-02-2720:51:24 今天晚上注定我要玩一夜这个东西,太爽了,给力! 烧写固件成功, http://blog.csdn.net/Lingdongtianxia/article/deta ...
- U盘安装完美的WIN7操作系统教程
准备工作 首先备份或者在官网下载好您机器的驱动,否则完成后可能无法正常使用 ①一个有win7或者XP系统的电脑(制作启动盘用) ②一个4G以上的U盘 ③win7&win8系统包(请到官网下载或 ...
- 【笔记JS/HTML/CSS】CSS3实现鼠标滑动显示动画(transition、transform)
内容中包含 base64string 图片造成字符过多,拒绝显示
- RocketMQ学习笔记(14)----RocketMQ的去重策略
1. Exactly Only Once (1). 发送消息阶段,不允许发送重复的消息 (2). 消费消息阶段,不允许消费重复的消息. 只有以上两个条件都满足情况下,才能认为消息是“Exactly O ...