highcharts - Highcharts 工具提示裁剪

Question

我正在使用高图表，但遇到一个问题，即在 SVG 的外部元素处裁剪掉较大的工具提示，如下图所示。

工具提示和 xAxis的选项useHTML设置为 true，因为我正在应用一些自定义 CSS 这些元素。

有没有办法让工具提示不裁剪？

我的 highcharts 代码如下所示：

        return {
        chart: {
            renderTo: this._chartContainer,
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: this._getTitle(values)
        },
        xAxis: {
            categories: values.rows.labels[0],
            labels: {
                formatter: function() {
                    return '<span class="xAxisTruncate" title="' + this.value + '">'+ this.value +'</span>';
                },
                useHTML: true
            }
        },
        yAxis: {
            max: this._getMax(),
            min: this._getMin(),
            gridLineWidth: 2,
            opposite: true,
            tickInterval: 31 * 24 * 3600 * 1000,
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%b %y'
            },
            title: {
                text: yAxisTitleText
            },
            endOnTick: false,
            labels: {
                align: 'left'
            }
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderColor: 'transparent',
                borderRadius: 5,
                groupPadding: 0.05
            },
            columnrange: {
                dataLabels: {
                    enabled: true
                },
                animation: false,
                colorByPoint: false
            }
        },
        legend: {
            enabled: false
        },
        series: columnRangeSeries,
        tooltip: {
            enabled: true,
            useHTML: true,
            formatter: function(){
                return this.point.toolTip;
            }
        }
    };

提前致谢。

Answer 1

我很确定，堆栈上存在类似的主题，但是我找不到。一般来说，可以使用 HTML 工具提示来实现，请参阅：http: //jsfiddle.net/7wVDV/147/

CSS：

.highcharts-container {
  overflow: visible !important;
}
.MyChartTooltip {
  position: relative;
  z-index: 50;
  border: 2px solid rgb(0, 108, 169);
  border-radius: 5px;
  background-color: #ffffff;
  padding: 5px;
  font-size: 9pt;
}