一. 添加基本配置

  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. Oracle数据库数据显示乱码问题解决方法。

    一.问题描述:       在将其它数据库的数据导出文件导入本地新建数据库时,所导入的数据全部是乱码,一般表现为数据表中列的值类似于"?????",即内容大部分为?的表现形式.初步 ...

  2. C#模拟百度登录并到指定网站评论回帖(五)

    前面的四篇已经说完了全部的模拟百度登录,接下来就是到指定的网站去发表评论,当然你也可能是获取其他信息,其实这些套路都是万变不离其宗的,弄懂之后觉得像这种请求-响应获取信息的功能实在很简单(想起当初走的 ...

  3. leetcode221 Maximal Square

    思路: dp. 实现: class Solution { public: int maximalSquare(vector<vector<char>>& matrix) ...

  4. Git——github基本操作

    基本概念 上一篇文章写到git共享仓库,但是有个局限性,就是这个仓库存在于本地,其他人无法从我们这个仓库拿到共享的内容 但是我们可以将这个共享仓库放入一个远程的服务器上,然后设置一些登录权限就能完美的 ...

  5. 【笔记JS/HTML/CSS】web中的HTTP协议(1)

    最近都在coursera刷课,加上自己课业也忙起来了,总是忘记写学习笔记ORZ 自省ing... 在写HTML的时候,form表单需要通过HTTP协议向服务器提交.查询数据(如下图) 客户端通过HTT ...

  6. redis的安装和使用【2】redis的java操作

    修改redis.conf# 配置绑定ip,作者机子为192.168.100.192,请读者根据实际情况设置bind 192.168.100.192#非保护模式protected-mode no保存重启 ...

  7. Windows提高_2.1第一部分:线程

    第一部分:线程 什么是线程? 线程其实可以理解为一段正在执行中的代码,它最少由一个线程内核对象和一个栈组成. 线程之间是没有从属关系的,同一进程下的所有线程都可以访问进程内的所有内容. 主线程其实是创 ...

  8. vscode调试单个PHP脚本文件

    1.安装完vscode里的debug插件后, 在WorkSpace setting:添加上php的可执行文件路径: 2.下载适合自己PHP版本的Xdebug 3.在PHP目录下的php.ini配置文件 ...

  9. ZOJ - 3987 - Numbers (大数 + 贪心)

    参考自:https://blog.csdn.net/u013534123/article/details/78484494 题意: 给出两个数字n,m,把n分成m份,使得以下最小 思路: 或运算只有0 ...

  10. ubuntu root用户登陆

    sudo vi /etc/lightdm/lightdm.conf   (如果没有该文件则创建,内容如下) [SeatDefaults] user-session=ubuntu greeter-ses ...