Question

我想让用户知道他只需点击它就可以从图例中删除项目。对某些人来说，这可能是直观的，但其他人可能不知道他们可以做到这一点。我想让用户知道什么时候他们可以点击图例然后点击删除它。

我正在使用GWT-wrapper类进行highcharts。

谢谢。

Answer 1

Highcharts没有项目图例的内置工具提示，但您仍然可以为此创建自己的工具提示。将自定义事件添加到legendItem（例如鼠标悬停和鼠标悬停）并显示工具提示很简单。

请参阅示例如何向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);
                }

            }
        }

Answer 2

还有另一个机会将工具提示悬停在Highcharts传奇上。您只需要为图例启用useHTML并重新定义labelFormatter函数;此函数应返回包含在“span”标记中的标签文本。在这个“span”标记中，可以包含一个类来应用基于jQuery的工具提示（例如jQuery UI或Bootstrap）。还可以使用'data-xxx'属性传输一些数据（例如，图例项的索引）：

public override void RegisterArea(AreaRegistrationContext context) 
{
    context.MapRoute(
        "Admin_default",
        "Admin/{controller}/{action}/{id}",
        new {controller = "Home", action = "Index", id = UrlParameter.Optional },
        namespaces: new[] { "Web.Areas.Admin.Controllers" }
    );
}

可以根据需要格式化工具提示;超链接也是可能的。 The fiddle is here.

Answer 3

你可以做到。

起初，Highcharts具有回调功能 https://stackoverflow.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
    })
});

悬停时将工具提示添加到highcharts中的图例

3 个答案: