highcharts - ホバリング時にハイチャートの凡例にツールチップを追加

Question

アイテムをクリックするだけで凡例からアイテムを削除できることをユーザーに知らせたいと思います。一部の人にとってはこれは直感的かもしれませんが、他の人はそれができることを知らないかもしれません. ユーザーが凡例項目を超えたときにクリックして削除できることをユーザーに知らせたいと思います。

ハイチャートに GWT-wrapper クラスを使用しています。

ありがとうございました。

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

ハイチャートの凡例にカーソルを合わせると、ツールチップが表示される別の機会があります。凡例に対して useHTML を有効にし、labelFormatter 関数を再定義するだけです。この関数は、「span」タグに囲まれたラベル テキストを返す必要があります。この「span」タグには、jQuery ベースのツールチップ (jQuery UI や Bootstrap など) を適用するためのクラスを含めることができます。また、「data-xxx」属性を使用して一部のデータ (たとえば、凡例項目のインデックス) を転送することもできます。

labelFormatter: function () {
    return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>';
}

ツールチップは自由にフォーマットできます。ハイパーリンクも可能です。フィドルはここにあります。

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