X 轴标签与高图中柱形图中的工具提示重叠

Question

我有一个堆积柱形图。我可以将长字符串作为 x 轴上的标签，因此我使用了格式化程序来修剪字符串并在工具提示上显示完整字符串。问题是当我将鼠标悬停在列上时，x 轴标签和工具提示内容重叠，看起来很难看。我希望工具提示背景完全不透明。当我对标签执行 useHTML false 时效果很好，但这样做我无法对标签使用 html 标签。请用 useHTML true.

提出一些解决方案

这里 fiddle 显示了问题 jsfiddle

Answer 1

您可以简单地增加highcharts 的高度并将tooltip 的backgroundColor 设置为透明。

Fiddle: http://jsfiddle.net/4mznaybs/11/

    chart: {
        type: 'column',
        height : 300
    },
     tooltip: {
        borderWidth: 0,
            backgroundColor: "rgba(255,255,255,0)",
            borderRadius: 05,
            shadow: false,
            useHTML: true,
            percentageDecimals: 2,
            backgroundColor: "rgba(255,255,255,1)",
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y +     '<br/>' +
                'Total: ' + this.point.stackTotal;
        },

    },

和CSS为：

 .label {
     z-index: 1 !important;
 }

.highcharts-tooltip span {
    background-color:white;
    border:1px solid green;
    opacity:1;
    z-index:9999 !important;
}

.tooltip {
    padding:5px;
}

Answer 2

从 xAxis - 标签中删除 useHTML: true。因为您只是在设计工具提示的样式。那么你的好

X 轴标签与高图中柱形图中的工具提示重叠

X axis labels overlap tooltip in column chart in highcharts

javascript

css

highcharts