jquery 图表插件highcharts & highstock
转自：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）
全英文版：
http://www.highcharts.com/
所有参数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:{
// 允许线性图上的数据点进行点击
allowPointSelect: true,
// 数据点的点击事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在图注中显示。
showInLegend: true,
// 调整图像顺序关系
zIndex: 3
},
/**
* 曲线图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
*/
spline:{
// 允许线性图上的数据点进行点击
allowPointSelect: true,
// 数据点的点击事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在图注中显示。
showInLegend: true,
// 调整图像顺序关系
zIndex: 3
},
/**
* 饼状图
*/
pie:{
// 是否允许扇区点击
allowPointSelect: true,
// 点击后，滑开的距离
slicedOffset: 5,
// 饼图的中心坐标
center: [100, 80],
// 饼图的大小
size: 100,
// 数据标签
dataLabels: {
// 是否允许标签
enabled: true,
// 标签与图像元素之间的间距
distance: 10
},
// 数据点的点击事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 是否忽略隐藏的项
ignoreHiddenPoint: true,
// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在图注中显示。
showInLegend: false,
// 调整图像顺序关系
zIndex: 0
}
},
/**
* 数据图表标签配置
*
* @param {array} items 项目配置
*/
labels: {
items: [{
html: '水果总消耗量',
style: {
left: '65px',
top: '8px',
color: 'black'
}
}]
},
/**
* 数据源配置，本身是一个对象数组
*
* @param {string} type 图表的类型
* @param {string} name 数据序列的名称
* @param {array} data 数据序列，是一个对象数组
*/
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: '平均',
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'pie',
name: '水果总消耗量',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23,
color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}]
}]
});
});
});
</script>
</head>
<body>
<script src="./js/highcharts/highcharts.js"></script>
<script src="./js/highcharts/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html>
<html>
<head>
<title>highstock报表示例</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" src="./js/usdeur.js"></script>
<script type="text/javascript">
//图表
$(function() {
/**
* highstock数据图表
*
* @param {object} chart 图表的相关参数配置
* @param {object} credits 图表版权信息参数配置
* @param {object} lang 图表语言参数配置
* @param {object} exporting 导出配置
* @param {object} title 标题配置
* @param {object} xAxis X轴配置
* @param {array} series 数据源配置
*/
var chart1 = new Highcharts.StockChart({
/**
* 图表配置
*
* @param {string} renderTo 图表加载的位置
* @param {int} width 图表的宽度
* @param {int} hight 图表的高度
*/
chart: {
renderTo: 'container',
// 图表宽度
width: 700,
// 图表高度
hight: 500
},
/**
* 版权信息配置，不用修改直接复制
*
* @param {boolean} enabled 是否显示版权信息
* @param {string} href 版权信息所链接到的地址
* @param {string} text 版权信息所显示的文字内容
*/
credits:{
enabled: false,
href: "http://www.msnui.tk/Admin",
text: '微源网络科技'
},
/**
* 语言配置，不用修改直接复制
*
* @param {array} months 配置月份语言
* @param {array} shortMonths 配置短月份
* @param {array} weekdays 配置星期
* @param {string} exportButtonTitle 导出按钮的标题文字
* @param {string} printButtonTitle 打印按钮的标题文字
*/
lang:{
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一', '十二'],
weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
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: '报表',
// 配置导出接口
url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',
// 导出文件默认类型
type:'application/pdf'
},
/**
* 图表的标题
*
* @param {string} text 图表的标题，如果不需要显示标题，直接设置为空字符串就行
*/
title: {
text: '图表实例标题'
},
/**
* 域选择配置
*
* @param {array} buttons 缩放选择按钮
* @param {int} selected 默认选择缩放按钮中的第几个
* @param {boolean} inputEnabled 是否允许input标签选框
*/
rangeSelector: {
// 缩放选择按钮，是一个数组。
// 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
// 其中count是指多少个单位type。
// 其中text是配置显示在按钮上的文字
buttons: [{
type: 'month',
count: 1,
text: '1月'
}, {
type: 'month',
count: 3,
text: '3月'
}, {
type: 'month',
count: 6,
text: '6月'
}, {
type: 'year',
count: 1,
text: '1年'
},{
type: 'year',
count: 3,
text: '3年'
}, {
type: 'all',
text: '所有'
}],
// 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……
selected: 1,
// 是否允许input标签选框
inputEnabled: false
},
/**
* 气泡示说明标签
*
* @param {string} xDateFormat 日期时间格式化
*/
tooltip:{
// 日期时间格式化
xDateFormat: '%Y-%m-%d %A'
},
/**
* X轴坐标配置
*
* @param {object} dateTimeLabelFormats x轴日期时间格式化，不用修改直接使用
*/
xAxis:{
// 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
/**
* 数据源配置，本身是一个对象数组
*
* @param {string} name 数据序列的名称
* @param {array} data 数据序列，是一个对象数组。data的结构：[[时间戳, 值], [时间戳, 值], [时间戳, 值], ……]
*/
series: [{
name: '数据名称',
data: usdeur
}]
});
});
</script>
</head>
<body>
<script src="./js/highstock/highstock.js"></script>
<script src="./js/highstock/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html>
转自：http://www.52wulian.org/highcharts_api/
HighCharts 详细使用及API文档说明
一、HighCharts开发说明
HighCharts开发实际上配置HighCharts每个部分，比如配置标题（title），副标题（subtitle）等，其中每个部分又有更细的参数配置，比如标题下有对齐方式（align），标题文字（text）等。
下图为整个图表的每个部分位置说明。
二、HighCharts整体结构
通过查看API文档我们知道HighCharts结构如下（API文档在文章后面提供下载）
var chart = new Highcharts.Chart({
chart: {…} // 配置chart图表区
colors: [{...}] // 配置主体显示颜色（多个线条和柱体的颜色顺序的）
credits: {…} // 配置右下角版权链接
exporting: {…} // 配置导出及打印
global: {…} // HighCharts国际化方法调用
labels: {…} // HTML标签，可以放置在绘图的任何位置
lang: {…} // 语言对象属性配
legend: {…} // 配置图例选项
loading: {…} // 配置图表加载选项
navigation: {…} // 配置导出按钮属性
pane: {…} // 仅适用于极性图表和角仪表
plotOptions: {…} // 配置数据点选项
series: [{...}] // 配置数据列选项
subtitle: {…} // 配置副标题
title: {…} // 配置标题
tooltip: {…} // 配置数据点提示框
xAxis: {…} // 配置x轴选项
yAxis: {…} // 配置y轴选项
})
红色部分表示为了图表的完整性或美观性必须配置的属性。
其他选项无特殊需要默认就行，也就是不用配置，所以开发HighCharts其实很简单，只需要配置简单的几个选项就行，下面详细讲解每个选项的配置。
三、HighCharts每部分详细配置
- chart ：图表区选项
参数名 说明 默认值 backgroundColor 设置图表区背景色 "#FFFFFF" borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 renderTo 图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值 null defaultSeriesType 默认图表类型line, spline, area, areaspline,column, bar, pie , scatter "line" width 图表宽度，默认根据图表容器自适应宽度 null height 图表高度，默认根据图表容器自适应高度 null margin 设置图表与其他元素之间的间距，数组，如[0,0,0,0] [null] plotBackgroundColor 主图表区背景色，即X轴与Y轴围成的区域的背景色 null plotBorderColor 主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色 null plotBorderWidth 主图表区边框的宽度 0 shadow 是否设置阴影，需要设置背景色backgroundColor false reflow 是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小 true zoomType 拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：’x',’y',’xy’ “” events 事件回调，支持addSerie、click、load、selection等方法的回调函数 - colors ：数据列颜色选项
参数名 说明 默认值 color 用于展示图表，折线/柱状/饼状等图的颜色，数组形式
默认是从第一个数据列起调用第一个颜色代码，有多少个数
据列调用相应数量的
颜色当数据列大于默认颜色数量时，重复从第一个颜色看是调用colors: [
'#058DC7','#50B432',
'#ED561B','#DDDF00',
'#24CBE5','#64E572',
'#FF9655','#FFF263',
'#6AF9C4'] - credits ：版权链接选项
参数名 说明 默认值 enabled 是否显示版权及链接，布尔型，默认为显示 true position 位置。可用align调整对齐方式，x，y设置距离。 position: { align: ‘right’,x: -10, verticalAlign: ‘bottom’,y: -5 } href 链接地址。String型，默认是highCharts官网 www.highcharts.com style css样式 itemStyle : {cursor:’pointer’,color:’#909090′,fontSize:’10px’} text 显示文字 highcharts.com - exporting ：导出及打印选项
参数名 说明 默认值 buttons 打印和导出按钮样式 enabled 是否显示按钮（也就是启用打印导出功能），布尔型 true filename 导出图片文件名 “chart” type 文件格式，有image/png | image/jpeg | application/pdf | image/svg+xml “image/png” url 务器url，默认是用highcharts服务器 http://export.highcharts.com width 图片宽度 800 - labels ：HTML标签（可放置在图表的任意地方）
参数名 说明 默认值 items html代码 “” style 标签样式 style: {color: ‘#3E576F’} - lang ： 语言配置选项，主要配置符号、导出时显示的语句、时间显示语言等（一下只列举几个，更多请参考API文档）
参数名 说明 默认值 decimalPoint 小数点符号 “.” downloadJPEG 导出显示的文字,还有downloadPDF等，都一样 “Download JPEG image” months 月份，字符串数组形式 ['January' 'February', 'March',
'April','May', 'June',
'July','August','September',
'October', 'November', 'December']numericSymbols 数值单位，比如1000为1k ['k', 'M', 'G', 'T', 'P', 'E'] - legend ：图例选项
参数名 说明 默认值 layout 布局方向，水平horizontal和垂直vertical “horizontal” align 对齐方式 “center” backgroundColor 背景颜色 null borderColor 图例边框颜色 #909090 borderRadius 图例边框角度 5 enabled 是否显示图例 true floating 是否可以浮动，配合x，y属性 false shadow 是否显示阴影 false - plotOptions ：数据点选项
参数名 说明 默认值 enable 是否在数据点上直接显示数据 “horizontal” align 对齐方式 “center” backgroundColor 背景颜色 null borderColor 图例边框颜色 #909090 borderRadius 图例边框角度 5 enabled 是否显示图例 true floating 是否可以浮动，配合x，y属性 false shadow 是否显示阴影 false - series ：数据列选项
参数名 说明 默认值 data 显示在图表中的数据列，可以为数组或者JSON格式的数据。例如：
data:[0, 5, 3, 5]，data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
“” dataParser 数据分隔符 “,” name 数据列名 “” type 数据列类型,同图表类型 “line” - title ： 图表标题选项
参数名 说明 默认值 text 标题文本内容 “Chart title” align 水平对齐 “top” margin 标题与副标题或图标区的间距 15 floating 是否浮动，如果为true，则标题可以偏离主图表区 false style css样式 {color: ‘#3E576F’,fontSize: ’16px’} x 水平距离(相对于水平对齐方式) 0 y 垂直距离(相对于垂直对齐方式) 15 - subtitle ： 副标题选项 (同标题属性)
- tooltip ：数据点提示框选项
参数名 说明 默认值 enable 是否显示提示框 true backgroundColor 设置提示框的背景色 “top” borderColor 提示框边框颜色 “auto” borderRadius 提示框圆角度/td> 5 style css样式 style: {
color: ‘#333333′,fontSize: ’9pt’,
padding: ’5px’}formatter 回调函数，用于格式化输出提示框的显示内容
返回的内容支持html标签如：<b>, <strong>,<br/>
- xAxis ：x轴选项
参数名 说明 默认值 categories 设置X轴分类名称，数组，例如：
categories: ['Apples', 'Bananas', 'Oranges']
[] title X轴名称,其下还有更详细的配置 labels 设置X轴各分类名称的样式style，如格式formatter，角度rotation等 15 max X轴最大值，如果为null，则自动匹配 null min X轴最大值，同max null gridLineColor 网格(竖线)颜色 “#C0C0C0″ gridLineWidth 网格(竖线)宽度 1 lineColor 基线颜色 “#C0D0E0″ lineWidth lineWidth 0 - yAxis ：y轴选项(配置同X轴)
四、实例说明
1、要求
- 绘制一个显示本站2012/9/22日访问统计，包括浏览量（pv），IP数的折线图。
- 轴按每小时统计，y轴显示对应的数量
- 折线图上x轴对应的点显示数量，当鼠标经过改点时，用提示框形式显相关信息
- 要有图例显示每条折现代表什么数据信息
- 图表右下角加上“我爱物联网”字样并链接到www.52wulian.org
- 要有主标题和副标题
- 要能实现图表打印及导出常见格式的图片功能
2、具体实现
- 在html文件中引入Jquery库及Highcharts库文件（highcharts.js及exporting.js）
- 按照需求参考API文档配置图表每部分功能
3、代码
4、在线演示
5、源文件下载
五、HighCharts API文档下载
下载地址：http://pan.baidu.com/share/link?shareid=63516&uk=3087605183
本站统一解压密码：www.52wulian.org
写在后面的话：
本文只是简单的说明了HighCharts基本配置，关于HighCharts使用，还需要读者自己研究，当然，为了照顾大家，本站退出了HighCharts专栏，详细讲解了HighCharts基础配置，HighCharts函数，HighCharts图表综合运用等
欢迎转载，请注明转自： 我爱物联网（http://www.52wulian.org）
本文链接: HighCharts 详细使用及API文档说明
为及时获取我们的最新内容，请将我们 订阅到QQ邮箱，我们将通过 QQ邮箱给你推送最新内容！