Highcharts工具提示裁剪

我使用的是高图表，但是在SVG的外部元素上裁剪更大的工具提示时遇到了问题，如下图所示。

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

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

我的高楼代码看起来像这样：

  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

我很确定，堆栈中存在类似的主题，但我无法find它。 一般来说，可以使用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; }