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 prototype原型操作笔记
Dec 07 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
简单了解JS打开url的方法
Feb 21 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
学习php分页代码实例
2013/10/24 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
python操作日期和时间的方法
2014/03/11 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
django 读取图片到页面实例
2020/03/27 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
管理失职检讨书
2014/02/12 职场文书
高中军训感言1000字
2014/03/01 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Java Socket实现多人聊天系统
2021/07/15 Java/Android