web-dev-qa-db-ja.com

ハイチャートツールチップは常にカーソルの右側にあります

カーソルの右側にツールチップを表示したいと思います。

ドキュメント/例を調べましたが、ツールチップをカーソルの右側に配置する方法が見つかりません。

誰かがそれを行う方法を教えてもらえますか？

ツールチップポジショナー の場合、デフォルトの位置しか設定できません。

highcharts
15
nelsonvarela

ツールチップポジショナーは、単なるデフォルトの位置ではありません。関数の引数には、ポイントの位置とツールチップの寸法に関する情報が含まれています。これを使用すると、ポイントを右に配置するのがかなり簡単になります。

ハイチャート/ストックを使用すると、代替ポジショナーを定義できます 次のように

tooltip:{
    positioner:function(boxWidth, boxHeight, point){
        ...
    }
}

3つの引数（boxWidth、boxHeight、point）を自由に使用できることに注意してください。これらは、ほとんどのユースケースで目的のツールチップ位置を計算するのに十分であるようです。 boxWidthとboxHeightは、ツールチップに必要な幅と高さです。したがって、これらをエッジケースに使用して、ツールチップを調整し、チャートからこぼれたり、さらに悪いことにクリップされたりするのを防ぐことができます。

ハイストックに付属するデフォルトのツールチップポジショナーは次のとおりです（ ソース ）

/**
 * Place the tooltip in a chart without spilling over
 * and not covering the point it self.
 */
getPosition: function (boxWidth, boxHeight, point) {

    // Set up the variables
    var chart = this.chart,
        plotLeft = chart.plotLeft,
        plotTop = chart.plotTop,
        plotWidth = chart.plotWidth,
        plotHeight = chart.plotHeight,
        distance = pick(this.options.distance, 12), // You can use a number directly here, as you may not be able to use pick, as its an internal highchart function 
        pointX = point.plotX,
        pointY = point.plotY,
        x = pointX + plotLeft + (chart.inverted ? distance : -boxWidth - distance),
        y = pointY - boxHeight + plotTop + 15, // 15 means the point is 15 pixels up from the bottom of the tooltip
        alignedRight;

    // It is too far to the left, adjust it
    if (x < 7) {
        x = plotLeft + pointX + distance;
    }

    // Test to see if the tooltip is too far to the right,
    // if it is, move it back to be inside and then up to not cover the point.
    if ((x + boxWidth) > (plotLeft + plotWidth)) {
        x -= (x + boxWidth) - (plotLeft + plotWidth);
        y = pointY - boxHeight + plotTop - distance;
        alignedRight = true;
    }

    // If it is now above the plot area, align it to the top of the plot area
    if (y < plotTop + 5) {
        y = plotTop + 5;

        // If the tooltip is still covering the point, move it below instead
        if (alignedRight && pointY >= y && pointY <= (y + boxHeight)) {
            y = pointY + plotTop + distance; // below
        }
    } 

    // Now if the tooltip is below the chart, move it up. It's better to cover the
    // point than to disappear outside the chart. #834.
    if (y + boxHeight > plotTop + plotHeight) {
        y = mathMax(plotTop, plotTop + plotHeight - boxHeight - distance); // below
    }


    return {x: x, y: y};
}

上記のすべての情報があれば、関数を変更してデフォルトの左ではなく右にフロートさせるだけで、要件を実装するのに十分なツールがあると思います。

先に進み、 ツールチップを右に配置する最も簡単な実装 、前述のデフォルトのツールチップポジショナーのコードに基づいてエッジケースを実装できるはずです。

tooltip: {
    positioner: function(boxWidth, boxHeight, point) {         
        return {x:point.plotX + 20,y:point.plotY};         
    }
}

続きを読む@ ハイチャートのカスタマイズ-ツールチップの配置

53
Jugal Thakkar

ツールチップを常にカーソルの右側に配置するためのより良い解決策は次のとおりです。

function (labelWidth, labelHeight, point) { 
    return { 
        x: point.plotX + labelWidth / 2 + 20,
        y: point.plotY + labelHeight / 2 
    };
}
1
Justin