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

Question

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

这是显示问题的 fiddle jsfiddle

Answer 1

您可以简单地增加 highcharts 的高度并将工具提示的 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;
}