一、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,注意先后顺序。

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

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

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

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

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

(5) js文件配置数据

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

  1. myApp.controller('BigChart', function() {
  2. var vm = this;
  3.  
  4. vm.charts = {
  5. options: {
  6. chart: {
  7. type: 'line',
  8. zoomType: 'x'
  9. },
  10. tooltip: {
  11. xDateFormat: '%Y-%m-%d %H:%M:%S',
  12. valueDecimals: 2
  13. },
  14. xAxis: {
  15. type: 'datetime',
  16. dateTimeLabelFormats: {
  17. hour: '%H:%M'
  18. },
  19. minRange: 1000, // 不能放大超过1s
  20. minTickInterval: 1000 // 放大间隔最小为1s
  21. }
  22. },
  23. 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: {
  1. text: null
  2. }
  3. }
  4. }

这里的配置项可以完全使用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. 如何修改SQL SERVER服务器的端口

    sql server的服务器端口默认是1433,设置服务器端口的位置在这里: 这里的端口,默认是1433,我把它改成了65499 修改端口之后,客户端如何连接? 下面是SSMS的连接方式: 下面是一个 ...

  2. CYQ.Data+EasyUI开发:几个相关的问题CheckBox、Tree、TreeGrid

    前言: 话说到新的公司已经呆了三个星期了,从上班的第二天开始就一直在写项目文档和给开发人员培训,以至于我的QQ签名从"我不是来搞培训的“到最后直接换成”我是来搞培训的“. 虽然挂名开发经理, ...

  3. Setting Up KeePass For Centos 6

    This mini-howto describes how to set up KeePass on Centos 6. It requires building mono from source a ...

  4. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  5. (源码下载)高灵活度,高适用性,高性能,轻量级的 ORM 实现

    我在上一篇博客中简单说明了一个面向内存数据集的“ORM”的实现方法,也提到我的设计实现或许不能称之为“ORM”,姑且称之为 S-ORM吧. 可能有些小伙伴没有理解我的思路和目的,与传统ORM框架做了简 ...

  6. 使用VS+VisualGDB编译Linux版本RCF

    RPC通信框架--RCF介绍中说了,RCF本身是支持跨平台的,其代码放到Linux平台,是可以通过gcc.make等工具,编译通过的. 官方提供的源码中,只有cmake编译脚本,并没有提供Makefi ...

  7. [SQLServer大对象]——FileTable从文件系统迁移文件

    阅读导航 从文件系统中迁移文件到FileTable 批量加载文件到FileTable 如何批量加载文件到FileTable 通过博文[SQLServer大对象]——FileTable初体验,已经可以将 ...

  8. 无法启动WP Emulator

    记得以前Vware不能运行设置的东西了吗?http://www.cnblogs.com/dunitian/p/4480750.html 如果不清楚可以参考上面的链接 重启的时候选择第二项 重新打开就o ...

  9. OpenCASCADE View Manipulator

    OpenCASCADE View Manipulator eryar@163.com Abstract. When you finish modeling objects in the scene, ...

  10. OpenCascade MeshVS Usage

    OpenCascade MeshVS Usage eryar@163.com Abstract. MeshVS means Mesh Visualization Service. It can be ...