当鼠标悬停在 highcharts 中时向图例添加工具提示

lnvxswe2  于 2022-11-10  发布在  Highcharts
关注(0)|答案(4)|浏览(304)

我想让用户知道,他可以从图例中删除项目,只需单击它们。对一些人来说,这可能是直观的,但其他人可能不知道他们可以这样做。我想让用户知道,当他们超过图例项目,然后可以单击删除它。
我使用GWT Package 器类来处理 highcharts 。

  • 谢谢-谢谢
mpbci0fu

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);
                }

            }
        }
qni6mghb

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.

wbgh16ku

wbgh16ku3#

你能做到的
Highcharts最初具有回调功能。
https://stackoverflow.com/a/16191017
修改后的Tipsy可以在SVG中显示工具提示。
http://bl.ocks.org/ilyabo/1373263

  • 在此页面上使用jquery.tipsy.js和tipsy.css。
    然后,开始像这样的 highcharts 。
$('#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
    })
});
vecaoik1

vecaoik14#

虽然已经有了很好的答案,但我仍然想分享我的简化解决方案(灵感来自上面提供的答案)。
如果您只需要一个纯文本工具提示,您可以使用<span>title属性(W3 School, title attribute-当鼠标移动到元素上时,通常显示为工具提示文本)。
在你的Highcharts选项对象中设置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对象中:

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/

相关问题