highcharts 将共享工具提示放置在堆叠列的上方

nxagd54h  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(165)

当使用堆叠柱时,我希望工具提示位于堆叠柱的上方。现在,工具提示将出现在柱的悬停部分上方,如下所示:

我希望工具提示总是出现在堆叠列的上方,而不管悬停的部分是什么,如下所示:

(来源:i.ibb.co
我知道定位器的方法,但是这个函数似乎没有接收到合适的参数来将工具提示定位在堆叠的列上。特别是我不知道如何正确地获得悬停列的坐标,我得到的只是光标的全局位置。

ibps3vxo

ibps3vxo1#

您可以将shared参数用于工具提示:

tooltip: {
    shared: true
}

现场演示:http://jsfiddle.net/BlackLabel/us4h659d/
API引用:https://api.highcharts.com/highcharts/tooltip.shared

unftdfkk

unftdfkk2#

因此,我最终设法使用Axis.toValue()和Axis.toPixels()值来完成此操作:
https://api.highcharts.com/class-reference/Highcharts.Axis
要使我的解决方案正常工作,您需要有一种方法来获得堆叠列的总值。可能有一种方法可以只使用Highcharts对象来完成此操作,但出于兼容性原因,我不喜欢过多地破坏Highcharts的内部结构。
定位器方法可能如下所示:

function positioner(labelWidth, labelHeight, point)
{
    // Default position, assuming mChart is the Highcharts object
    var chartY = point.plotY + mChart.plotTop;
    var chartX = point.plotX + mChart.plotLeft;

    // Move chartY above the stacked column, assuming getTotalColumnValue() exists
    var category = Math.round(mChart.xAxis[0].toValue(point.plotX, true));

    if(category in mChart.xAxis[0]['categories'])
        chartY = mChart.yAxis[0].toPixels(getTotalColumnValue(category), false);

    // Move tooltip above the point, centered horizontally
    return {
        x: chartX - labelWidth / 2,
        y: chartY - labelHeight - 10,
    };
}

相关问题