Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库。

Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

Highcharts 免费提供给个人学习、个人网站和非商业用途使用。

HighCharts 特性

  • 兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。
  • 多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。
  • 免费使用 - 开源免费。
  • 轻量 - highcharts.js 内核库大小只有 35KB 左右。
  • 配置简单 - 使用 json 格式配置
  • 动态 - 可以在图表生成后修改。
  • 多维 - 支持多维图表
  • 配置提示工具 - 鼠标移动到图表的某一点上有提示信息。
  • 时间轴 - 可以精确到毫秒。
  • 导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式
  • 输出 - 网页输出图表。
  • 可变焦 - 选中图表部分放大，近距离观察图表；
  • 外部数据 - 从服务器载入动态数据。
  • 文字旋转 - 支持在任意方向的标签旋转。

支持的图表类型

HighCharts支持的图表类型：

序号 图表类型
1 曲线图
2 区域图
3 饼图
4 散点图
5 气泡图
6 动态图表
7 组合图表
8 3D 图
9 测量图
10 热点图
11 树状图(Treemap)

Highcharts 环境配置

本章节我们将为大家介绍如何在网页中使用 Highcharts。

本教程将 Highcharts 与 jQuery 结合使用，所以在加载 Highcharts 前必须先加载 jQuery 库。

如果你对 jQuery 不熟悉，可以参阅本站的jQuery 教程。

安装 jQuery

jQuery 安装可以使用以下两种方式：

  • 1、访问 jquery.com 下载jQuery包。

  • 2、使用 BootCDN 静态资源库的jQuery资源：

    http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js

  • 3、使用百度静态资源库的jQuery资源：

    http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

使用下载的方式

使用下载的方式，在 HTML 页面引入 jQuery 代码:

<head>

   <script src="/jquery/jquery.min.js"></script>

</head>

使用 CDN（推荐）

使用 BootCDN 静态资源库来加载jQuery库：

<head>

   <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

</head>

安装 Highcharts

Highcharts 安装可以使用以下两种方式：

使用下载的方式（推荐）

使用下载的方式，在 HTML 页面引入 Highcharts 代码:

<head>

   <script src="/highcharts/highcharts.js"></script>

</head>

使用 CDN

使用官方提供的 CDN 地址：

<head>

   <script src="http://code.highcharts.com/highcharts.js"></script>

</head>
 
 
 
 
 
 
 
 
 

HighCharts 特性；Highcharts 环境配置的更多相关文章

  1. Spring环境配置

    研究spring3的时候发现一个非常好用的特性:环境配置(spring2是否有此特性未知) 官方演示样例代码例如以下: <!-- app-config.xml --> <beans ...

  2. Highcharts 环境配置

    Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts. Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery ...

  3. HighCharts学习笔记(二)HighCharts结构及详细配置

    HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...

  4. XMPP开发环境配置

    首先配置XMPP开发环境配置需要的软件 先安装xampp-osx-1.8.3-5-installer.dmg 安装成功后launchpad里会多出一个XAMPP(其他),点开里面的manager-os ...

  5. Android 开发基础及环境配置

    2011年买了第一部安卓操作系统的手机,当时势头正盛的HTC不可思议(incredible),当时的想法就是想学习下智能手机开发,但是由于各种原因,客观上是公司的项目太忙了,忙于项目管理.团队建设.客 ...

  6. (转) 一步一步学习ASP.NET 5 (一）- 基本概念和环境配置

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助. 编者语:时代在变,在csdn开博一年就发了那么的两篇文章,无论是什么原因都觉得有愧了.但是今年重心都会在这里发表一些文章,和大家谈谈.NET, 移 ...

  7. Windows7+VS2012下OpenGL 4的环境配置

    系统环境 Windows 7 Ultimate x64,Visual Studio Ultimate 2012 Update 4,和一块支持OpenGL 4.x的显卡. 准备工作 首先用GPU Cap ...

  8. Laravel教程 一：安装及环境配置

    Laravel教程 一:安装及环境配置 此文章为原创文章,未经同意,禁止转载. Homestead 最近在SF上面看到越来越多的Laravel相关的问题,而作为一个Laravel的脑残粉,本来打算有机 ...

  9. PySe-001-基础环境配置（MacOX）

    Python 是一种面向对象.解释型计算机程序设计语言,其源代码同样遵循 GPL(GNU General Public License)协议.Python语法简洁而清晰,具有丰富和强大的类库.由于Py ...

随机推荐

  1. Mac OS OpenVpN 连接设置(转)

    下文介绍Mac OS连接使用OpenVPN方法教程,使用的软件是免费开源的Tunnelblick,当然也有其它连接软件,比如Viscosity,不过这个是付费的,还是前面的用的多. 1.下载安装Tun ...

  2. 性能调优之MySQL篇一：MySQL性能计数器

    计数器 计数器分析 Threads_connected 表示当前有多少个客户连接该mysql服务器,连接数是否过多,网络是否存在问题,它是动态变化的,当达到最大连接数时,数据库系统就不能提供更多的连接 ...

  3. idea中 在接口中如何直接跳转到该接口的是实现类中？

    例如,我想跳转到UserInfoDao 这个接口的实现类中,操作如下: 把鼠标放到这个接口UserInfoDao 上面,右键,选择 GO To ,然后选择 Implementations,就可以直接跳 ...

  4. Hive环境安装

    说明: (Hbase依赖于Hadoop,同时需要把元数据存放在mysql中),mysql自行安装 Hadoop2.0安装参考我的博客: https://www.cnblogs.com/654wangz ...

  5. javaee加密部署，tomcat使用自己的classloader解密

    http://www.2cto.com/kf/201312/264455.html [起因] 公司需要对一个web项目进行加密之后出售, 大家都知道的,class很好反编译, 所以需要对class文件 ...

  6. CentOS的Qt3和Qt4问题

    在有的系统中,装有Qt3和Qt4, 在使用qmake生成Makefile后,直接make, 出错,说没有头文件, 如果调用了qt3的qmake,那么上头的INCPATH里的头文件路径也指向了Qt3, ...

  7. Java：出现错误提示（java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date）

    Java:出现错误提示(java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date) 原因分析: ...

  8. React 常用插件库

    js 加密 crypto-js (des加密,md5) crypto-js https://www.npmjs.com/package/crypto-js Mock联调 数据是前端开发过程中必不可少的 ...

  9. Elasticsearch、MongoDB、Hadoop适用场景

    如果你仅仅想要通过关键字和简单的分析,那么Elasticsearch可以完成任务: 如果你需要查询文档,并且包含更加复杂的分析过程,那么MongoDB相当适合: 如果你有一个海量的数据,需要大量不同的 ...

  10. xtrabackup备份脚本

    背景:现网环境全备份脚本:基于xtrabackup命令 #!/bin/sh # MySQL端口 PORT=' # 备份用户 USER='bkpuser' PAWD='bkpuser' Time=`da ...