我想在HighChart中自定义工具提示功能。 我有一个条形图,在悬停时工具提示现在只显示一个值,但我想显示三个值。
以下是我的代码:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
subtitle: {
},
xAxis: {
categories: ['Question\'s'],
title: {
text: ''
}
},
yAxis: {
min: 0,
title: {
text: 'Average Scores',
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: -10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'My Issue',
data: [5.4]
// want to add some value here to display
}, {
name: 'My Knowledge',
data: [8.2]
// want to add some value here to display
}, {
name: 'My Friendliness',
data: [7]
// want to add some value here to display
},
{
name: 'My time',
data: [6]
// want to add some value here to display
},
{
name: 'Z Score',
data: [9]
// want to add some value here to display
}
]
});
});
Js fiddle:http://jsfiddle.net/bu5fs1Lj/2/
答案 0 :(得分:0)
您可以使用chart.tooltip.options.formatter
之类的:
chart.tooltip.options.formatter = function() {
var xyArr=[];
$.each(this.points,function(){
xyArr.push('Serie: ' + this.series.name + ', ' +'X: ' + this.x + ', Y: ' +this.y);
});
return xyArr.join('<br/>');
}
这里是fiddle
的更多信息答案 1 :(得分:0)
我发现了
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
subtitle: {
},
xAxis: {
categories: ['Question\'s'],
title: {
text: ''
}
},
yAxis: {
min: 0,
title: {
text: 'Average Scores',
},
labels: {
overflow: 'justify'
}
},
tooltip: {formatter: function(){
return 'The value for <b>' + this.y + '</b><br>Total Survey is <b>' + this.series.options.Credit[this.point.index] + '</b>';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: -10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'My Issue',
data: [5.4],
Credit: [21]
}, {
name: 'My Knowledge',
data: [8.2],
Credit: [22]
}, {
name: 'My Friendliness',
data: [7],
Credit: [22]
},
{
name: 'My time',
data: [6],
Credit: [22]
},
{
name: 'Z Score',
data: [9],
Credit: [22],
Credit: [22]
}
]
});
});