Highcharts工具提示裁剪 [英] Highcharts Tooltip cropping

问题描述

$ b

我使用高图表，但在SVG的外部元素上裁剪更大的工具提示时遇到问题。 =https://i.stack.imgur.com/yKszO.jpgalt =在这里输入图片描述>

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

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

我的highcharts代码如下所示：

  return {
 chart：{
 renderTo：this._chartContainer，
 type：'columnrange'，
 inverted：true 
}，
 title：{ 
 text：this._getTitle（values）
}，
 xAxis：{
 categories：values.rows.labels [0]，
 labels：{
格式化程序：function（）{
 return'< span class =xAxisT runcatetitle ='+ this.value +'>'+ this.value +'< / span>'; 
}，
 useHTML：true 
} 
}，
 yAxis：{
 max：this._getMax（），
 min：this ._getMin（），
 gridLineWidth：2，
相反：true，
 tickInterval：31 * 24 * 3600 * 1000，
类型：'datetime'，
 dateTimeLabelFormats ：{
 month：'％b％y'
}，
 title：{
 text：yAxisTitleText 
}，
 endOnTick：false，
标签：{
 align：'left'
} 
}，
 plotOptions：{
 series：{
 borderWidth：0，
 borderColor：'transparent'，
 borderRadius：5，
 groupPadding：0.05 
}，
 columnrange：{
 dataLabels：{
 enabled：true 
}，
 animation：false，
 colorByPoint：false 
} 
}，
图例：{
 enabled：false 
}，
 series：columnRangeSeries，
 tooltip：{
 enabled：true，
 useHTML：true，
 formatter：function（）{
返回this.point.toolTip; 
} 
} 
}; 
  

预先致谢。

解决方案

我很确定，堆栈中存在类似的主题，但我无法找到它。通常可以使用HTML工具提示来实现，参见： http://jsfiddle.net/7wVDV/147/

CSS：

  .highcharts-container { 
溢出：可见！重要; 
} 
 .MyChartTooltip {
 position：relative; 
 z-index：50; 
 border：2px solid rgb（0，108，169）; 
 border-radius：5px; 
 background-color：#ffffff; 
 padding：5px; 
 font-size：9pt; 
} 
  

I am using high charts but am experiencing an issue with larger tooltip cropping off at the outer elements of the SVG, as per the image below.

The option useHTML is set to true for the tooltip and xAxis, as I am applying some custom CSS these elements.

Is there a way to have the tooltip not to crop?

My highcharts code looks like this:

        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;
            }
        }
    };

Thanks in advance.

解决方案

I'm pretty sure, that similar topic exists on stack, however I can't find it. In general it is possible to achieve that using HTML tooltip, see: 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;
}

这篇关于Highcharts工具提示裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！