一. 添加基本配置

  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. CSS之浮动元素

    <html> <head> <meta charset="utf-8"> <title></title> <sty ...

  2. [ SPOJ Qtree1 ] Query on a tree

    \(\\\) Description 给定 \(n\) 个点的树,边按输入顺序编号为\(1,2,...n-1\) . 现要求按顺序执行以下操作(共 \(m\) 次): \(CHANGE\ i\ t_i ...

  3. XAMPP--Apache服务无法启动问题定位及处理

    一.问题简述: XAMPP 在使用一段时间后,Apache服务无法启动. 二.详细描述: 安装Xampp服务器套件之后,部署使用正常.一段时间未使用,再次打开时,Apache服务无法启动.错误提示如下 ...

  4. 微信小程序组件解读和分析:三、swiper滑块视图

    swiper滑块组件说明: 滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换   组件的使用示例的运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? ...

  5. 百度AI车牌识别测试

    测试背景 百度已发布诸多AI应用,其中包含车牌识别,免费使用量是200次/日.付费的话,按月调用次数在20万次到50万次之间,每日10000次,月费用为0.0035*300000=1050元. 详见: ...

  6. HDU_1874_畅通工程续_最短路问题

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. 并发和多线程(三)--并发容器J.U.C和lock简介

    AQS: 是AbstractQueuedSynchronizer的简称,JUC的核心 底层是sync queue双向链表,还可能有condition queue单向链表,使用Node实现FIFO队列, ...

  8. Oracle 把一个用户所有表的读权限授予另一个用户

    create user <USER_NAME> identified by <PASSWORD>; grant create session TO <USER_NAME& ...

  9. Apache 和 Nginx 下的 URL 重写

    URL 重写和重定向 URL 重写是将页面映射到本站另一页面, 而重定向则是将页面映射到另一主机(域名). 其中临时重定向(R=302)和永久重定向(R=301)都是亲搜索引擎的, 是 SEO 的重要 ...

  10. Android studio开发-第一个应用

    Android studio开发-第一个应用 上效果图 1.先创建布局文件 firstbutton.xml 代码 <?xml version="1.0" encoding=& ...