悬停时在工程图中添加工具提示图标
问题描述:
我想让用户知道他只需点击图标即可删除图例中的项目。对某些人来说,这可能很直观,但其他人可能不知道他们可以这样做。我想让用户知道他们何时可以点击删除它。悬停时在工程图中添加工具提示图标
我正在使用GWT包装类为highcharts。
谢谢。
答
Highcharts没有内置的item legend的工具提示,但仍然可以为此创建自己的工具提示。将自定义事件添加到legendItem(例如,mouseover和mouseout)并显示该工具提示很简单。
见例如如何将事件添加到元素在Highcharts:http://jsfiddle.net/rAsRP/129/
events: {
load: function() {
var chart = this,
legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var item = legend.allItems[i].legendItem;
item.on('mouseover', function (e) {
//show custom tooltip here
console.log("mouseover" + i);
}).on('mouseout', function (e) {
//hide tooltip
console.log("mouseout" + i);
});
})(i);
}
}
}
答
还有另外一个机会,在上空盘旋Highcharts传说得到提示。您只需为图例启用useHTML并重新定义labelFormatter函数;这个函数应该返回包含在“span”标签中的标签文本。在这个“span”标签中,可以包含一个类来应用基于jQuery的工具提示(例如jQuery UI或Bootstrap)。此外,它可以传送某些数据(例如,一个图例项的索引)使用“数据-XXX”属性:
labelFormatter: function() {
return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>';
}
工具提示可以根据需要被格式化;超链接也是可能的。 The fiddle is here.
答
你可以这样做。
起初,Highcharts有回调函数。
https://*.com/a/16191017
修改后的版本Tipsy可以在SVG中显示工具提示。
http://bl.ocks.org/ilyabo/1373263
*在此页面上使用jquery.tipsy.js和tipsy.css。
然后,开始像这样的高楼图。
$('#your-chart').highcharts(your_chart_options,function(chart){
$('#your-chart').find('.highcharts-legend-item').each(function(){
// set title text example
var _text = $(this).text(),
_title = '';
switch(_text){
case "legend 1":
_title = 'legend 1 title';
break;
case "legend 2":
_title = 'legend 2 title';
break;
}
// add <title> tag to legend item
$(this).append($('<title></title>').text(_title));
});
$('#your-chart').find(".highcharts-legend-item").tipsy({
gravity: 's',
fade: true
})
});
如何将此功能添加到我的Java代码?因为即时通讯使用GWT。我当前正在尝试chart.setOption(“/ chart/events/load”,“load:function()...)但这似乎不起作用 – bubbles 2013-04-24 00:55:30
对不起,我不熟悉Highcharts的GWT适配器。 – 2013-04-24 09:53:59