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 '' + this.series.name + ': 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'} ] }]
});
