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小数计算出现近似值的解决办法
Feb 06 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
js 轮播效果实例分享
Dec 28 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
JS对日期操作封装代码实例
Nov 08 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
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php实现word转html的方法
2016/01/22 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python中的CURL PycURL使用例子
2014/06/01 Python
Python中的filter()函数的用法
2015/04/27 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python在线运行代码助手
2016/07/15 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
实习生单位鉴定意见
2013/12/04 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
社区工作者先进事迹
2014/01/18 职场文书
人民调解员培训方案
2014/06/05 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL