当标志标题和标志文本都长于某个长度时,工具提示开始与标志本身重叠。因此,鼠标可以轻松浏览工具提示。因此,鼠标无法与图表交互,因为它位于工具提示之上,而不是直接在图表上方。只有当鼠标移出工具提示区域时,鼠标才会再次与图表进行交互。
当有很多标志时,与图表交互变得非常困难。
尝试将悬停在长标题的旗帜上: http://jsfiddle.net/msjaiswal/angnU/
以下是代码:
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'USD to EUR exchange rate'
},
yAxis : {
title : {
text : 'Exchange rate'
}
},
series : [{
name : 'USD to EUR',
data : data,
id : 'dataseries',
tooltip : {
valueDecimals: 4
}
}, {
type : 'flags',
data : [{
x : Date.UTC(2011, 1, 14),
title : 'A',
text : 'Shape: "squarepin"'
}, {
x : Date.UTC(2011, 3, 28),
title : 'Long tooltip title',
text : 'This is a really really really long tooltip text.'
}],
onSeries : 'dataseries',
shape : 'squarepin',
}, {
type : 'flags',
data : [{
x : Date.UTC(2011, 2, 1),
title : 'B',
text : 'Shape: "circlepin"'
}, {
x : Date.UTC(2011, 3, 1),
title : 'B',
text : 'Shape: "circlepin"'
}],
shape : 'circlepin',
width : 16
}, {
type : 'flags',
data : [{
x : Date.UTC(2011, 2, 10),
title : 'C',
text : 'Shape: "flag"'
}, {
x : Date.UTC(2011, 3, 11),
title : 'C',
text : 'Shape: "flag"'
}],
color : '#5F86B3',
fillColor : '#5F86B3',
onSeries : 'dataseries',
width : 16,
style : {// text style
color : 'white'
},
states : {
hover : {
fillColor : '#395C84' // darker
}
}
}]
});
});
});
这有什么优雅的解决方法吗?
答案 0 :(得分:0)
实际上,我自己找到了一个解决方法。通过制作工具提示跟随鼠标,鼠标永远不会超过工具提示。这不是一个完美的解决方案,而是一个很好的解决方法。 使用选项:
tooltip: {
followPointer : true
}
答案 1 :(得分:0)