1. 简介
Highcharts图表控件是目前使用最为广泛的图表控件 ,是纯JS图表库。
主要特性如下：
- 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
- 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
- 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
- 时间轴：可以精确到毫秒；
- 费用：对个人用户完全免费；
- 组成：纯JS，无BS；
- 支持图表：支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
- 提示功能：鼠标移动到图表的某一点上有提示信息；
- 放大功能：选中图表部分放大，近距离观察图表；
2. 环境配置
1. 下载Highcharts
Highcharts 官网：http://www.highcharts.com
2. 解压Highcharts
3. 下载jQuery
jQuery官网： http://jquery.com/
4. 将用到的文件放到工程的js目录下
- highcharts.js是主要的js文件
- themes是样式文件夹，主要有深蓝、深绿、灰色、网格四种样式风格。
- modules文件夹下主要包含一个图表图片到出的格式js，有png、jpg、及svg格式。
- adapters下有mootools和prototype适配器
MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。
它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时 候。它提供了一个比普通js更面向对象的document API。
ProtoType是一个跟MooTools类似的js框架。
5. 开始使用
6. 源码展示
01 |
<!DOCTYPE |
02 |
<html> |
03 |
<head> |
04 |
<meta"Content-Type" content="text/html;> |
05 |
<title>Highcharts |
06 |
07 |
<script"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
08 |
<script"text/javascript"> |
09 |
$(function |
10 |
$('#container').highcharts({ |