我想让用户知道,他可以从图例中删除项目,只需单击它们。对一些人来说,这可能是直观的,但其他人可能不知道他们可以这样做。我想让用户知道,当他们超过图例项目,然后可以单击删除它。我使用GWT Package 器类来处理 highcharts 。
mpbci0fu1#
Highcharts没有内置的项目图例工具提示,但你仍然可以创建自己的工具提示。向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); } } }
qni6mghb2#
在Highcharts图例上悬停时还有另一个机会可以获得工具提示。此函数应返回包含在“span”标记中的标签文本。在此“span”标记中,可以包含一个类来应用基于jQuery的工具提示(例如jQuery UI或Bootstrap)。还可以使用“data-xxx”属性传输某些数据(例如,图例项的索引):
labelFormatter: function () { return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>'; }
工具提示可以根据需要设置格式;也可以使用超链接。The fiddle is here.
wbgh16ku3#
你能做到的Highcharts最初具有回调功能。https://stackoverflow.com/a/16191017修改后的Tipsy可以在SVG中显示工具提示。http://bl.ocks.org/ilyabo/1373263
$('#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 }) });
vecaoik14#
虽然已经有了很好的答案,但我仍然想分享我的简化解决方案(灵感来自上面提供的答案)。如果您只需要一个纯文本工具提示,您可以使用<span>的title属性(W3 School, title attribute-当鼠标移动到元素上时,通常显示为工具提示文本)。在你的Highcharts选项对象中设置legend.useHTML: true &配置legend.labelFormatter:
<span>
title
legend.useHTML: true
legend.labelFormatter
legend: { enabled: true, useHTML: true, labelFormatter: function () { // if legendTooltip set, put it into title attr if (this.options.custom && this.options.custom.legendTooltip) { return '<span title="' + this.options.custom.legendTooltip + '">' + this.name + '</span>'; } return '<span>' + this.name + '</span>'; } },
并将custom.legendTooltip添加到需要工具提示的系列的options对象中:
custom.legendTooltip
series: [{ name: 'counter', data: [110, 50, 130], custom: { // provide a tooltip text here: legendTooltip: "Counter custom tooltip" } }]
(使用custom的对象是recommended by Highcharts)另请参阅JS小提琴:http://jsfiddle.net/uhocybpj/8/
custom
4条答案
按热度按时间mpbci0fu1#
Highcharts没有内置的项目图例工具提示,但你仍然可以创建自己的工具提示。向legendItem添加自定义事件(例如,mouseover和mouseout)并显示该工具提示很简单。
请参阅如何在Highcharts中向元素添加事件的示例:http://jsfiddle.net/rAsRP/129/
qni6mghb2#
在Highcharts图例上悬停时还有另一个机会可以获得工具提示。此函数应返回包含在“span”标记中的标签文本。在此“span”标记中,可以包含一个类来应用基于jQuery的工具提示(例如jQuery UI或Bootstrap)。还可以使用“data-xxx”属性传输某些数据(例如,图例项的索引):
工具提示可以根据需要设置格式;也可以使用超链接。The fiddle is here.
wbgh16ku3#
你能做到的
Highcharts最初具有回调功能。
https://stackoverflow.com/a/16191017
修改后的Tipsy可以在SVG中显示工具提示。
http://bl.ocks.org/ilyabo/1373263
然后,开始像这样的 highcharts 。
vecaoik14#
虽然已经有了很好的答案,但我仍然想分享我的简化解决方案(灵感来自上面提供的答案)。
如果您只需要一个纯文本工具提示,您可以使用
<span>
的title
属性(W3 School, title attribute-当鼠标移动到元素上时,通常显示为工具提示文本)。在你的Highcharts选项对象中设置
legend.useHTML: true
&配置legend.labelFormatter
:并将
custom.legendTooltip
添加到需要工具提示的系列的options对象中:(使用
custom
的对象是recommended by Highcharts)另请参阅JS小提琴:http://jsfiddle.net/uhocybpj/8/