highcharts中文教程
http://www.hcharts.cn/docs/index.php?doc=basic-chart
事件（在chart这个object里设置）
例子1（click）:
// create the chart
$('#container').highcharts({
chart: {
events: {
click: function (event) {
//this.renderer.label().add()
var label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
例子2（drilldown）:
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
//this即是chart本身
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
/*e.point.name获取点击的那个点的名字
*name这个属性是series里定义的
*/
series = drilldowns[e.point.name];
// Show the loading label.图标的loading这样加
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();//隐藏loading提示
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
//这个datalabel不是tooltip，而是每个点上的标签
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
});
例子3（图表放大细化）:
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Hide overlapping data labels'
},
series: [{
data: (function (arr, len) {
var i;
for (i = 0; i < len; i = i + 1) {
arr.push(i);
}
return arr;
}([], 50)),
dataLabels: {
enabled: true,
y: -5
}
}]
});
//button
$('#setextremes').click(function () {
$('#container').highcharts().xAxis[0].setExtremes(10, 15);
});
$('#unsetextremes').click(function () {
$('#container').highcharts().xAxis[0].setExtremes();
});
例子4（两个y轴）:
$(function () {
$('#container').highcharts({
chart: {
marginRight: 80 // like left
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
lineWidth: 1,
title: {
text: 'Primary Axis'
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Secondary Axis'
}
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
type: 'spline',
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
yAxis: 1
}]
});
});
例子5（tooltip当中this的属性）:
$('#container').highcharts({
plotOptions: {
line:{
events :{
click:function(){
alert('x='+event.point.x + ", y=" + event.point.y + ", extra=" + event.point.extra);
}
}
}
},
tooltip:{
formatter:function(){
return '<b>' + this.series.name + '</b>: y=' + this.y + ', extra='+this.point.extra;
}
},
series: [{ data: [
{y:29.7,extra:'hhh'},
{y:71.5,extra:'2333'},
{y:106.4,extra:'1122'},
{y:129.2,extra:'vvvv'} ] }]
});
例子6（自定义legend点击事件，隐藏其他只显示点击serie）:
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
var index = this.index;
var series = this.chart.series;
if (!series[index].visible) {
for (var i = 0; i < series.length; i++) {
var s = series[i];
i === index ? s.show() : s.hide();
}
}
return false;
}
}
}
}
---关键点---
知识点1：
定义图的类型可以在chart的object选项里设置，也可以在series这里设置
series: [{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse()
}]
知识点2：
label是坐标轴上刻度值的显示格式
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
[color=blue]labels: {
formatter: function () {
return this.value + 'km';
}
},[/color]
maxPadding: 0.05,
showLastLabel: true
}
知识点3：
colors定义series颜色，数据列调用颜色的方式是第 n 个数据列使用第 n 个颜色数组里的值，当序列的数量超过颜色数组的长度，后续的序列将会从头调用。
$('#container').highcharts({
chart: {
type: 'pie'
},
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
colorByPoint属性表示是为每一个series匹配一种颜色还是为每一个点匹配一种颜色
plotOptions: {
column: {
colorByPoint:true
}
}
知识点4：
pointStart、pointInterval、tooltip还可以配在series里
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000, // one day
tooltip: {
valueSuffix: ' mm'
}
}]
});
});
知识点5：
legend的相关处理
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'left',
verticalAlign: 'top',
x: 90,
y: 45,
labelFormatter: function() {
/*
* 获取数据列下标，通过下标判断做一系列处理
* 还可以通过获取数据列名字等来做判断（通过 console.log(this) 来查看数据列详细信息）
*/
var index = this._i;
// return null 则可以不显示图例项
return index === 0 ? null : this.name;
}
}
知识点6：
公共设置
Highcharts.setOptions({
// 所有语言文字相关配置都设置在 lang 里
lang: {
resetZoom: '重置',
resetZoomTitle: '重置缩放比例'
}
});
知识点7：
要对highcharts当中的元素进行操作，如何找到元素？
控制台console查看对象属性：
1.对象的相应函数在对象的__proto__属性里面（主要看这点）
2.通常有animate相关属性
3.通常有jQuery1725832659457895这样的属性（应该是代表真正的元素，因为该属性下有events属性）
1.对象的相应函数在对象的__proto__属性里面（主要看这点）
2.通常有animate相关属性
3.通常有jQuery1725832659457895这样的属性（应该是代表真正的元素，因为该属性下有events属性）
知识点8：
------------------------------------------
chart:
event: click
对应的获取选中的点是通过 chart.getSelectedPoints() 函数来实现的
饼图的白色间隔是linewidth的原因，相同情况产生于area图表
event: click
对应的获取选中的点是通过 chart.getSelectedPoints() 函数来实现的
饼图的白色间隔是linewidth的原因，相同情况产生于area图表
------------------------------------------
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime',
maxZoom: 48 * 3600 * 1000 //表示label之间的间隔
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day ，表示取单位一天为每一个取值点
}]
});
});
-------------------
plotOptions: {
line: { //针对line图标的公共设置
dataLabels: {
enabled: true,
formatter: function() {
return this.x + " " + this.y;
},
// format: "{x} {y}"
}
}
}