highcharts - HighChart ツールチップの位置は変更できますか?

Question

私はハイチャートが初めてです。デフォルトでは、ハイチャートはチャート自体の中にツールチップを表示します。ツールチップをチャートの外側に、内側に表示していたのと同じ位置に表示することは可能ですか?

Answer 1

独自の div を定義し、ツールチップ フォーマッタを使用してその中に情報を表示できます。

例: http://jsfiddle.net/Lqq9D/

tooltip: {
        formatter:function(){
            $('#tooltip').html('Point Y: '+this.y);
        }
    },

Answer 2

はい、Tooltip.positioner を使用して変更できます。API へのリンクは次のとおりです: http://api.highcharts.com/highcharts#tooltip

Answer 3

tooltip: {
              positioner: function () {
                    return { x: 45, y: 60 };
                }
            }

これを使って

Answer 4

デフォルトのツールチップとカスタム ツールチップを同時に

上記は、デフォルトのツールチップと独自のカスタム ツールチップの両方を表示できる例です。@Ricardo Lohmann は、次の投稿でカスタム ツールチップの作成方法を示しました。

ハイチャート - 凡例のツールチップ

// first of all we've to build a group to put the elements
this.SVGElements = this.chartVar.renderer.g().attr({'zIndex': 11}).add();

// build tooltip text
var textContainer = this.chartVar.renderer.text(text, coord[0], coord[1])
                .attr({
                    'zIndex': 10
                })
                .add(this.SVGElements);

// get text 'box'
var box = textContainer.getBBox();

// build  tooltip square according to the text location, then place the container behind the text
this.chartVar.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
                .attr({
                    'stroke-width': 2,            // border width
                    'stroke': '#a8a8a8',        // border color
                    'zIndex': 9,
                    'fill': 'white',            // background color
                    'fill-opacity': 0.85,        // background opacity
                    'isShadow': true
                })
                .add(this.SVGElements);