将共享工具提示放在堆积列上方

问题描述 投票:0回答:2

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

我希望工具提示始终显示在堆积列的上方,而不管悬停的部分,如下所示:

我知道定位器方法,但是这个函数似乎没有为我提供适当的参数来将工具提示放在堆叠列的上方。特别是我不知道如何正确获取悬停列的坐标,我得到的只是光标的全局位置。

highcharts
2个回答
0
投票

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

tooltip: {
    shared: true
}

现场演示:http://jsfiddle.net/BlackLabel/us4h659d/

API参考:https://api.highcharts.com/highcharts/tooltip.shared


0
投票

所以我终于设法使用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,
    };
}
© www.soinside.com 2019 - 2024. All rights reserved.