Question

我有一个带有工具提示的Highcharts图表，在悬停时显示加载微调器并通过AJAX从服务器获取一些数据以显示。请求完成后，使用jQuery将数据放入工具提示中的span，但由于工具提示没有调整大小，新内容会溢出。这是我的SCSS：

.highcharts-tooltip {
    width: auto !important;
    height: auto !important;
    span {
        width: auto !important;
        height: auto !important;
    }
}

我可以使用设置或API函数让工具提示在内容更改时自动调整大小，还是强制重绘？或者，我可以使用一些CSS来实现这项工作吗？

N.B。我可以通过设置上面span的高度/宽度来手动设置工具提示的大小。

Answer 1

我建议禁用默认工具提示并使用完整的响应/ HTML div（使用媒体查询），这将是工具包。

plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function (e) {
                        $('#tooltip').html('Point value: ' + this.y).css({
                            top: e.target.plotY - 15,
                            left: e.target.plotX
                        }).show();

                    },
                    mouseOut: function (e) {
                        $('#tooltip').hide();
                    }
                }
            }
        }
    },

示例：http://jsfiddle.net/gL7j6bzq/2/

Highcharts工具提示会自动调整内容更改

1 个答案: