转自：http://chen-miao.iteye.com/blog/1659769
Highcharts是纯JavaScript编写的图表库,提供了直观的、交互式图表,您的web站点或web应用程序。Highcharts目前支持线,花键、面积、areaspline、柱、栏、馅饼和散射图表类型。
Highstock允许您创建股票或一般的时间表图表在纯JavaScript,包括复杂的导航选项就像一个小导航仪系列,预定日期范围、日期选择器、滚动和淘金。
Read More：
所有参数api, http://api.highcharts.com/highcharts
共有参数：（以 line-basic 为例）
chart: {
renderTo: 'container', //作用div ID
type: 'line', //类型
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature', //图表标题
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com', //说明
x: -20
},
xAxis: { //X轴坐标值,所传的值一定要前端数组类型，因为后台传过来是文本型
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: { //Y轴
title: {
text: 'Temperature (°C)'
},
plotLines: [{ //Y轴开始，宽度，颜色
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: { //移到某个坐标点时提示内容
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical', //实体说明样式，当鼠标移到坐标点上时，出现坐标值，实体指下面的series的 //name值
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: { //是不是在图表上直接显示坐标具体值
line: {
dataLabels: {
enabled: true //true:显示 false:不显示
},
enableMouseTracking: false //上面 legend 效果
}
},
series: [{ //实体,data的类型一定要是数组型，并且每一个数据内容为数值型， parseFloat(值)
//或parseInt(内容)
name: 'Tokyo',
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: 'New York',
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: 'Berlin',
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: 'London',
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]
}]
兼容
它适用于所有现代浏览器包括iPhone / iPad和Internet Explorer从版本6。 标准的浏览器使用SVG图形渲染。在遗留Internet Explorer图形绘制VMLAlign使用
免费为非商业
你想要使用Highcharts对于一个个人网站,一个学校的网站或一个非盈利组织吗?然后你不需要作者的许可,就继续和使用Highcharts。对于商业网站和项目,查看许可证和定价。
开放
其中一个关键特性是,在Highcharts任何许可证,免费或没有,你可以下载源代码并使你自己的编辑。这允许个人修改和极大的灵活性。
纯JavaScript
Highcharts完全基于本地浏览器技术,不需要客户端插件,比如Flash或Java。而且你不需要安装任何服务器上。没有PHP或ASP.NET。 Highcharts只需要两个JS文件运行:Highcharts。 js的核心,要么jQuery,MooTools或原型框架。 这些框架的一个最有可能已经在使用您的web页面。
大量图表类型
Highcharts支持线,花键、面积、areaspline、柱、栏、馅饼和散射图表类型。这些可以被合并到一个图表。
简单的配置语法
设置Highcharts配置选项不需要特殊的编程技能。给出的选项在一个JavaScript对象符号结构,这基本上是一组键和值由冒号连接,之间用逗号隔开并分组由花括号。
动态
通过一个完整的API,您可以添加、删除和修改系列和点轴或修改后的任何时间图表的创建。众多的事件钩子提供编程霍霍图表。结合jQuery,MooTools或原型的Ajax API,这将打开解决像实时图表不断更新与值从服务器,用户提供的数据和更多。
多个轴
有时你想比较变量的不完全相同的规模,例如温度和降雨和空气压力。Highcharts允许您指定一个y轴为每个系列——或者一个x轴如果你想比较数据集的不同类别。每个轴可以放置向左或向右,顶部或底部的图表。所有的选项都可以单独设置,包括换向、样式和位置。
工具提示标签
在悬停图表Highcharts可以显示一个工具提示文本信息在每个点和系列。工具提示是作为用户将鼠标图,并已采取努力使其粘附到最近的点以及使它容易读一个点,低于另一个点。
Datetime轴
75%的图表用X和Y轴有一个日期-时间X轴。因此Highchart非常聪明的关于时间值。用毫秒轴单位,决定将,这样Highcharts总是本月初或一周,午夜到中午的时候,整个小时等。
打印
与exporting module起用,您的用户可以导出图表,PNG,JPG,PDF或SVG格式点击一个按钮,或打印图表直接从web页面。
缩放
通过放大图表您可以检查一个特别有趣的部分数据更密切。缩放可以在X或Y维度,或两者兼而有之。
外部数据加载
Highcharts需要数据在一个JavaScript数组,可以定义在本地配置对象,在一个单独的文件或者甚至在不同的网站。此外,数据可以处理到Highcharts在任何形式,和一个回调函数用来解析数据到一个数组中。
倒图表或逆转轴
有时你需要翻你的图表,让X轴出现垂直,比如说在一个条形图。扭转轴,具有最高价值出现离起点,支持。
文本旋转为标签
所有的文本标签,包括轴标签、数据标签点和轴冠军,在任何角度都可以旋转。
简捷版：
http://www.scriptlover.com/controls/highcharts/index.htm （不包括：Highstock）
全英文版：
所有参数api:
http://api.highcharts.com/highcharts
如果只是做一些简单的统计图表，建议查看简捷版，直观明了。但全英文版包括Highstock
转自：http://www.cnblogs.com/lfire/archive/2012/10/25/2738842.html
highcharts与highstock实例
<head>
<title>highcharts报表示例</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
/**
* highcharts数据图表
*
* @param {object} chart 图表的相关参数配置
* @param {object} credits 图表版权信息参数配置
* @param {object} lang 图表语言参数配置
* @param {object} exporting 导出配置
* @param {object} title 标题配置
* @param {object} xAxis X轴配置
* @param {object} yAxis Y轴配置
* @param {object} plotOptions 各类型图表绘制配置
* @param {object} labels 数据图表标签配置
* @param {array} series 数据源配置
*/
chart = new Highcharts.Chart({
/**
* 图表配置
*
* @param {string} renderTo 图表加载的位置
* @param {int} width 图表的宽度
* @param {int} hight 图表的高度
* @param {string} type 图表的默认类型
* @param {string} zoomType 图表的缩放选项，有：x, y, xy
*/
chart: {
// 图表加载的位置
renderTo: 'container',
// 图表宽度
width: 600,
// 图表高度
hight: 500,
// 默认图表类型
type: 'line',
// 缩放配置：x，y，xy
zoomType: ''
},
/**
* 版权信息配置，不用修改直接复制
*
* @param {boolean} enabled 是否显示版权信息
* @param {string} href 版权信息所链接到的地址
* @param {string} text 版权信息所显示的文字内容
*/
credits:{
enabled: false,
href: "http://www.msnui.tk/Admin",
text: '微源网络科技'
},
/**
* 语言配置，不用修改直接复制
*
* @param {string} exportButtonTitle 导出按钮的标题文字
* @param {string} printButtonTitle 打印按钮的标题文字
*/
lang:{
exportButtonTitle:'导出PDF',
printButtonTitle:'打印报表'
},
/**
* 导出配置，不用修改直接复制
*
* @param {boolean} enabled 是否允许导出
* @param {object} buttons 关于与导出和打印按钮相关的配置对象
* @param {string} filename 导出文件的文件名
* @param {string} type 默认导出文件的格式
*/
exporting:{
// 是否允许导出
enabled:true,
// 按钮配置
buttons:{
// 导出按钮配置
exportButton:{
menuItems: null,
onclick: function() {
this.exportChart();
}
},
// 打印按钮配置
printButton:{
enabled:false
}
},
// 文件名
filename: '报表',
// 导出文件默认类型
type:'application/pdf'
},
/**
* 图表的标题
*
* @param {string} text 图表的标题，如果不需要显示标题，直接设置为空字符串就行
*/
title: {
text: '联合图表实例'
},
/**
* X轴配置
*
* @param {array} categories X轴坐标分类值
* @param {object} labels 坐标标签配置对象
* @param {int} tickInterval 坐标轴的步进值
* @param {object} title 坐标轴标题
*/
xAxis: {
// X轴分类
categories: ['苹果', '桔子', '梨子', '香蕉', '李子'],
// 坐标轴的标签
labels:{
// 标签位置
align: 'center',
// 标签格式化
formatter: function(){
return this.value;
},
// 标签旋转度数
rotation: 20,
// 标签交错显示的行数
staggerLines: 1
},
// X轴的步进值，决定隔多少个显示一个
tickInterval: 1,
// 坐标轴标题
title: {
text: '水果分类'
}
},
/**
* y轴配置
*
* @param {object} labels 坐标标签配置对象
* @param {int} tickInterval 坐标轴的步进值
* @param {object} title 坐标轴标题
*/
yAxis: {
// 坐标轴的标签
labels:{
// 标签位置
align: 'right',
// 标签格式化
formatter: function(){
return this.value + '个';
}
},
// y轴的步进值，决定隔多少个显示一个
tickInterval: 3,
// 坐标轴标题
title: {
text: '水果个数'
}
},
/**
* 绘图的各选项、参数配置
* @param {object} series 数列，可以配置各种不同类型图表的默认参数
* @param {object} bar 横向柱状图配置参数
* @param {object} column 纵向柱状图配置参数
* @param {object} line 线性图
* @param {object} spline 圆滑曲线图配置参数
* @param {object} pie 饼状图
*/
plotOptions:{
/**
* 数列，对于所有的图表都可以适用的配置参数，属于共用性质。
*/
series: {
// 鼠标样式
cursor: 'pointer',
events:{
// 数据标注不可点击
legendItemClick: false
},
// 当是柱状图时，柱状的宽度
pointWidth: 15
},
/**
* 横向柱状图
*/
bar:{
// 数据点的点击事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 当值为0时，在图表中柱状体的长度设置
minPointLength: 2,
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 是否在图注中显示。
showInLegend: true,
// 是否堆叠，默认：null，数值：normal，百分比：percent
//stacking: 'normal',
// 调整图像顺序关系
zIndex: 1
},
/**
* 纵向柱状图
*/
column:{
// 数据点的点击事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 当值为0时，在图表中柱状体的长度设置
minPointLength: 2,
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 是否在图注中显示。
showInLegend: true,
// 是否堆叠，默认：null，数值：normal，百分比：percent
//stacking: null,
// 调整图像顺序关系
zIndex: 2
},
/**
* 线性图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
*/
line:{
// 允许线性图上的数据点进行点击