Question

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

这是表示问题的小提琴 jsfiddle

Answer 1

您可以简单地增加高图的高度，并将工具提示的背景颜色设置为透明。

小提琴：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 as：

 .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轴标签在高图中的柱形图中重叠工具提示

2 个答案: