highcharts 在angular中的使用示例代码


Posted in Javascript onSeptember 20, 2017

本文介绍了highcharts 在angular中的使用示例代码,分享给大家。具体如下:

网址

https://www.hcharts.cn/demo/highcharts

https://github.com/pablojim/highcharts-ng

安装依赖

npm install highcharts-ng --save

引入依赖

'highcharts/highcharts.src.js',
'highcharts-ng/dist/highcharts-ng.min.js'

注入依赖

var myapp = angular.module('myapp', ["highcharts-ng"]);

实例

// html
<highchart class="chart" config="chartConfig" class="span9" ></highchart>

// js
$scope.chartConfig = {
 title: {
   text: '哈哈哈',
   x: -20
 },
 subtitle: {
  text: 'Click and drag to zoom in.',
  x: -20
 },
 xAxis: {
  categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
 },
 yAxis: {
  title: {
   text: '温度 (°C)'
  },
  plotLines: [{
   value: 0,
   width: 1,
   color: '#808080'
  }]
 },
 tooltip: {
  valueSuffix: '°C'
 },
 legend: {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle',
  borderWidth: 0
 },
 series: [{
  name: '东京',
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
 }, {
  name: '纽约',
  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
 }, {
  name: '柏林',
  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
 }, {
  name: '伦敦',
  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
 }]
};

结果

highcharts 在angular中的使用示例代码

Highcharts 基本组成

highcharts 在angular中的使用示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
Bootstrap Table快速完美搭建后台管理系统
Sep 20 #Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 #Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 #Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 #Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 #Javascript
用vue构建多页面应用的示例代码
Sep 20 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php多重接口的实现方法
2015/06/20 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP模块化安装教程
2016/06/01 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php字符集转换
2017/01/23 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
python 字典(dict)按键和值排序
2016/06/28 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
super关键字的用法
2012/04/10 面试题
肖申克的救赎观后感
2015/06/02 职场文书