Highcharts展示饼图和线状图时，出现不同提示
最近在使用Highcharts，使用了显示两种以上的图形展示，要求实现按照不同的图像显示不同提示。
通过tooltip实现：
tooltip: {
formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
var s;
if (this.point.name) { // 饼状图
s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' +Highcharts.numberFormat(this.percentage, 1) + '%)'; //百分比需要格式化成两位'
} else {
s = '' + this.x + ': ' + this.y + '万吨';
}
return s;
}
},
总结下供大家参考。
完整代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container' //关联页面元素div#id
},
title: { //图表标题
text: '2011年东北三大城市水果消费量统计图'
},
xAxis: { //x轴
categories: ['柑橘', '香蕉','苹果', '梨子'], //X轴类别
labels:{y:18} //x轴标签位置：距X轴下方18像素
},
yAxis: { //y轴
title: {text: '消费量（万吨）'}, //y轴标题
lineWidth: 2 //基线宽度
},
tooltip: {
formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
var s;
if (this.point.name) { // 饼状图
s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' + this.percentage + '%)'; //百分比需要格式化成两位
} else {
s = '' + this.x + ': ' + this.y + '万吨';
}
return s;
}
},
labels: { //图表标签
items: [{
html: '水果消费总量对比',
style: {
left: '48px',
top: '8px'
}
}]
},
exporting: {
enabled: false //设置导出按钮不可用
},
credits: {
text: 'helloweba.com',
href: 'http://www.helloweba.com'
},
series: [
{
type: 'spline',
name: '平均值',
data: [8.03, 9, 11.6, 17]
},
{
type: 'spline',
name: '快速',
data: [12, 23, 31.6, 25]
},
{
type: 'pie', //饼状图
name: '水果消费总量',
data: [{
name: '苹果',
y: 60
},
{
name: '香蕉',
y: 36
},{
name: '橘子',
y: 36
}],
center: [100, 80], //饼状图坐标
size: 100, //饼状图直径大小
dataLabels: {
enabled: true //不显示饼状图数据标签
}
}]
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
实现如下图：