Hightcharts "shared：true"を使用してツールチップにジャンプ効果を避ける

Question

カーソルが積み重ねられた列にカーソルを置いたときに、ツールチップで「ジャンプ効果」と呼ぶものを避けたいと思います。 私が遭遇する問題の例を次に示します。 http://jsfiddle.net/ewget3wd/ - >私は積み重ねた列を持っていますが、私は積み重ねた列に対してユニークなツールチップを1つ持っていますが、私の例ではツールチップがあるバーから。

私はこの「ジャンプ効果」を避け、1つの共有ツールチップを持っています。私は、パラメータ shared:true を試みたが、あなたは、次の例に見ることができるように、ツールチップの小さな矢印がdisapeared： http://jsfiddle.net/5rktjo4g/

は、要約すると、私は（矢印付き）、その点1つのツールチップを持っていると思いに私の積み重ねられた柱の頂部。

ここに私の質問がありますか？ :-)

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

Answer 1

ツールチップの共有プロパティを使用して、ツールチップを配置するためにポジショナーを使用することができます。ここでは、あなたを助けるかもしれないコードを見つけることができます。

positioner: function(labelWidth, labelHeight, point) { 
    return { 
     x: point.plotX + labelWidth/2, 
     y: point.plotY - labelHeight/2 
    } 
    }, 

あなたのツールチップの形状を描画するための責任の機能をラップすることにより、コネクタを追加することができます：ここでは

(function(Highcharts) { 
    Highcharts.Renderer.prototype.symbols.callout = function(x, y, w, h, options) { 
     var arrowLength = 6, 
     halfDistance = 6, 
     r = Math.min((options && options.r) || 0, w, h), 
     safeDistance = r + halfDistance, 
     anchorX = options && options.anchorX, 
     anchorY = options && options.anchorY, 
     path; 

     path = [ 
     'M', x + r, y, 
     'L', x + w - r, y, // top side 
     'C', x + w, y, x + w, y, x + w, y + r, // top-right corner 
     'L', x + w, y + h - r, // right side 
     'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner 
     'L', x + r, y + h, // bottom side 
     'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner 
     'L', x, y + r, // left side 
     'C', x, y, x, y, x + r, y // top-right corner 
     ]; 

     //bottom arrow 
     path.splice(23, 3, 
     'L', w/2 + halfDistance, y + h, 
     w/2, y + h + arrowLength, 
     w/2 - halfDistance, y + h, 
     x + r, y + h 
    ); 
     return path; 
    }; 
    }(Highcharts)); 

あなたはそれが動作する方法の例を見ることができます： http://jsfiddle.net/ewget3wd/4/