一、Highcharts简介

Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库。

如果你的项目是基于jquery的,那么你可以轻松的把它拿过来使用,直接在页面中引入js文件并按照官方的API文档进行配置即可。下面提供了Highcharts的中英文官网:

(1) Highcharts英文网:http://www.highcharts.com/

(2) Highcharts中文网:http://www.hcharts.cn/

二、在AngularJS中使用Highcharts

如果你的项目是基于AngularJS的,同时也想在项目中使用Highcharts,那么就需要按照AngularJS的方法将jquery的Highcharts封装成指令的形式,下面介绍具体流程:

(1) 下载highcharts-ng.js文件

大家可以去https://rawgit.com/pablojim/highcharts-ng/v0.0.1/src/directives/highcharts-ng.js 上将代码保存名为highcharts-ng.js文件即可。此文件实现的功能即是将Highcharts封装成了AngularJS的自定义指令。

(2) 页面中引入js文件

这里需要注意的是在页面中我们需要同时引入highcharts.js和highcharts-ng.js,注意先后顺序。

<script type="text/javascript" src="../../static/src/tool/angular/angular.min.js?v=201511301743"></script>
<script type="text/javascript" src="../../static/src/tool/highcharts/highcharts.js?v=201511301743"></script>
<script type="text/javascript" src="../../static/src/tool/highcharts/highcharts-ng.js?v=201511301743"></script>

(3) 加载highcharts-ng模块依赖,如下:

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

(4) 页面绘图区域添加<highchart>标签

<div class="container-fluid" ng-controller="BigChart as vm">
<highchart class="chart-container-big" title='vm.charts.title' series="vm.charts.series" options="vm.charts.options">
</highchart>
</div>

(5) js文件配置数据

一般我们的数据都是从服务器端获取的,这里方便演示所以直接写死在js里了,如下:

myApp.controller('BigChart', function() {
var vm = this; vm.charts = {
options: {
chart: {
type: 'line',
zoomType: 'x'
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S',
valueDecimals: 2
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H:%M'
},
minRange: 1000, // 不能放大超过1s
minTickInterval: 1000 // 放大间隔最小为1s
}
},
series: {
        data: [100.0, 99.0, 100.0, 98.039216, 100.0, 99.0, 100.0, 100.0, 100.0, 100.0, 97.087379, 99.0, 99.009901, 100.0, 99.0, 100.0, 99.009901, 100.0, 100.0, 98.039216, 100.0, 100.0, 100.0, 99.009901, 99.009901, 100.0, 99.009901, 100.0, 99.0, 100.0, 100.0, 99.0, 100.0, 99.009901, 100.0, 99.0, 99.0, 99.009901, 99.009901, 100.0, 100.0, 99.009901, 100.0, 99.009901, 100.0, 99.0, 98.039216, 100.0, 99.0, 100.0, 99.0, 100.0, 100.0, 100.0, 100.0, 100.0, 99.0, 100.0, 100.0],
        name: '192.168.17.136'
      },
      title: {
              text: null
}
}
}

这里的配置项可以完全使用highcharts官方的API,唯一的区别在于多了一层option属性,除了series及title属性外基本都应该放置于option内。

(6)页面呈现

最后的对应的效果图如下:

在AngularJS中的使用Highcharts图表控件的更多相关文章

  1. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  2. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  3. JQuery Highcharts图表控件多样式显示多组数据

    具体实现的效果如图: 具体代码: ASP.NET前台脚本代码: <%@ Page Language="C#" AutoEventWireup="true" ...

  4. Echarts图表控件使用总结1(Line,Bar)

    问题篇(详解):http://www.cnblogs.com/hanyinglong/p/4708337.html 1.前言 a.在系统开发过程中可能会使用到图表控件,一个好的图标控件可以使我们的网站 ...

  5. 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

    在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...

  6. (转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

    http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...

  7. 关于微软C#中的CHART图表控件的简单使用【转】

    最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...

  8. 关于微软C#中的CHART图表控件的简单使用

    最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...

  9. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

随机推荐

  1. C++类型转换函数

    1.什么是类型转换函数 类型转换函数的作用是将一个类的对象转换成另一类型的数据. class testclass { private: int r; int m; public : testclass ...

  2. PHP的函数应用

    1.全部变量 全局变量也称为外部变量,是在函数的外部定义的,它的作用域为从变量定义处开始,到本程序文件的结尾.和其他编程语言不同,全局变量不是自动设置为可用的.在PHP中,由于函数可以视为单独的程序片 ...

  3. 认真分析mmap:是什么 为什么 怎么用

    mmap基础概念 mmap是一种内存映射文件的方法,即将一个文件或者其它对象映射到进程的地址空间,实现文件磁盘地址和进程虚拟地址空间中一段虚拟地址的一一对映关系.实现这样的映射关系后,进程就可以采用指 ...

  4. RPC通信框架——RCF介绍

    现有的软件中用了大量的COM接口,导致无法跨平台,当然由于与Windows结合的太紧密,还有很多无法跨平台的地方.那么为了实现跨平台,支持Linux系统,以及后续的分布式,首要任务是去除COM接口. ...

  5. 人生苦短,我用python——当我在玩python的时候我玩些什么

    文章背景 家里的第一台电脑是在2006年夏天买的,10年上大学之后基本上就没人用,过没两年就当二手卖给一个熟人. 弟弟小我10岁,今年刚上初一.他在我毕业前半年就整天用妈妈的手机发短信给我,问我什么时 ...

  6. Web3DGame之路,Babylonjs 和TypeScript学习笔记(二)

    先来认识一下Babylonjs,由于基于webgl来开发,所以先介绍一下基础知识. Webgl是一个html标准,他要在canvas元素上初始化. Html页面上的准备 所以我们先从html页面开始看 ...

  7. OpenGL学习资料汇总

    我学OpenGL的3D编程也有1.2个年头了,走了很多弯路,也算有点收获.现在整理出一些好用的资料如下. NeHe OpenGL教程中文版 地址(http://www.yakergong.net/ne ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 (45) ------ 第八章 POCO之获取原始对象与手工同步对象图和变化跟踪器

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-6  获取原始对象 问题 你正在使用POCO,想从数据库获取原始对象. 解决方案 ...

  9. 2013 duilib入门简明教程 -- 简单控件介绍 (12)

        前面的教程应该让大家对duilib的整体有所映像了,下面就来介绍下duilib具体控件的使用.     由于官方没有提供默认的控件样式,所以我就尽量使用win7或者XP自带的按钮样式了,虽然界 ...

  10. Atitit webservice的发现机制 discover机制

    Atitit webservice的发现机制 discover机制 1.1. Ws disconvert 的组播地址和端口就是37021 1.2. Ws disconvert的发现机制建立在udp组播 ...