How to display the tooltip on mouseover event on datalabel in the bar?
如何在条形图中的datalabel上显示鼠标悬停事件的工具提示?
$(document).ready(function(){
var yAxisLabels = ["Label1", "Label2", "Label3", "Label4"];
var legendValues = ["series1", "series2", "series3", "series4"];
var pLabels1 = ['70%','38%','71%','28%'];
var pLabels2 = ['27%','49%','27%','44%'];
var pLabels3 = ['2%','10%','2%','17%'];
var pLabels4 = ['1%','4%','1%','12%'];
var group4 = [52,528,129,264];
var group3 = [94,1388,394,401];
var group2 = [1446,7130,5591,1004];
var group1 = [3772,5512,14957,633];
var series = [
{ pointLabels: { labels: pLabels4 }},
{ pointLabels: { labels: pLabels3 }},
{ pointLabels: { labels: pLabels2 }},
{ pointLabels: { labels: pLabels1 } }];
var plot = $.jqplot('chart', [[[52,1],[528,2],[129,3],[264,4]], [[94,1],[1388,2],[394,3],[401,4]], [[1446,1],[7130,2],[5591,3],[1004,4]], [[3772,1],[5512,2],[14957,3],[633,4]]], {
stackSeries: true,
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true, barDirection: 'horizontal', highlightMouseOver: true},
pointLabels: {
show: true, stackedValue: true, location: 'w', hideZeros: true
}
},
axes: {
xaxis: {
tickOptions: {
show: true,
mark: 'cross',
formatString: "%'d",
showGridline: true
},
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
shadowWidth: 0,
borderWidth: 0,
background: 'rgba(0,0,0,0)',
shadow: false
},
series: series
});
});
的jsfiddle
2 个解决方案
#1
2
I am pretty sure there're easier/prettier/native way than that, but using this piece:
我很确定有比这更简单/更漂亮/本土的方式,但使用这件作品:
$('.jqplot-point-label').attr('title',
function() {
var seriesNumber = $(this).attr('class').split(' ')[1].split('-')[2];
return legendValues[seriesNumber]
}
);
You can locate every label and assign it's title attribute corresponding legend value.
您可以找到每个标签并为其指定标题属性对应的图例值。
Demo: http://jsfiddle.net/dhEE5/9/
演示:http://jsfiddle.net/dhEE5/9/
#2
0
You can do something like this:
你可以这样做:
$( ".jqplot-point-label" ).hover(
function() {
//Do some stuff when you enter the data label area
}, function() {
// Do some stuff when you leave data label area
});
$(“。jqplot-point-label”)。hover(function(){//当你进入数据标签区时做一些事情},function(){//当你离开数据标签区时做一些事情});
The important thing is the .jqplot-point-label selector.
重要的是.jqplot-point-label选择器。
#1
2
I am pretty sure there're easier/prettier/native way than that, but using this piece:
我很确定有比这更简单/更漂亮/本土的方式,但使用这件作品:
$('.jqplot-point-label').attr('title',
function() {
var seriesNumber = $(this).attr('class').split(' ')[1].split('-')[2];
return legendValues[seriesNumber]
}
);
You can locate every label and assign it's title attribute corresponding legend value.
您可以找到每个标签并为其指定标题属性对应的图例值。
Demo: http://jsfiddle.net/dhEE5/9/
演示:http://jsfiddle.net/dhEE5/9/
#2
0
You can do something like this:
你可以这样做:
$( ".jqplot-point-label" ).hover(
function() {
//Do some stuff when you enter the data label area
}, function() {
// Do some stuff when you leave data label area
});
$(“。jqplot-point-label”)。hover(function(){//当你进入数据标签区时做一些事情},function(){//当你离开数据标签区时做一些事情});
The important thing is the .jqplot-point-label selector.
重要的是.jqplot-point-label选择器。