一. 添加基本配置

  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. Android 性能优化(10)网络优化( 6)Optimizing General Network Use

    Optimizing General Network Use This lesson teaches you to Compress Data Cache Files Locally Optimize ...

  2. kafka的server.properties配置文件参考示范(图文详解)(多种方式)

    简单点的,就是 kafka_2.11-0.8.2.2.tgz的3节点集群的下载.安装和配置(图文详解) 但是呢,大家在实际工作中,会一定要去牵扯到调参数和调优问题的.以下,是我给大家分享的kafka的 ...

  3. Spring.Net学习笔记(二)-数据访问器

    Spring对ADO.NET也提供了支持,依赖与程序集Spring.Data.dll IDbProvider IDbProvider定义了数据访问提供器的基础,配置如下 <?xml versio ...

  4. tensorboard在windows系统浏览器显示空白的解决

    一个简单的using_tensorboard.py程序,如下: #using_tensorboard.py import tensorflow as tf a = tf.constant(10,nam ...

  5. JavaScript判断

    if...else: if...else语句是在指定的条件成立时执行的代码,在条件不成立时执行else后的代码. 语法: if(条件) {条件成立时执行的代码 }else{ 条件不成立的时执行的代码} ...

  6. Codeforces_766_D_(并查集)

    D. Mahmoud and a Dictionary time limit per test 4 seconds memory limit per test 256 megabytes input ...

  7. Windows提高_1.1内核对象

    内核对象 什么是内核对象? 内核对象本质上是一个结构体,我们不能直接的操作一个内核对象,需要通过操作系统提供的一系列函数和我们使用的内核对象句柄对它进行一系列的修改. 如何操作内核对象? 创建一个内核 ...

  8. css--小白入门篇3

    一.上篇知识复习 css属性,面试的时候会有笔试,笔试没有智能感应的: ● 加粗,倾斜,下划线: 1 font-weight:bold; 2 font-style:italic; 3 text-dec ...

  9. Bat 脚本(常用命令)

    Bat 批处理脚本 (常用) Bat 批处理脚本 === Content === 1. Rem 和 :: Rem 为注释命令,能回显. :: 为符号注释,不能回显. %行内注释内容% ===== (不 ...

  10. 截取命令cut命令、awk命令、sed命令

    cut命令 截取以制表符tab为分隔符的第一列 cut -f 1test.txt 截取以":"为分隔符的第一列,如果比较规律的文件,可以自己设定分隔符 cut -f 1 -d ': ...