Question

请看一下这个例子。我已经在jsfiidle上创建了。 http://jsfiddle.net/cr1t/LdLn2/1/

我遇到的问题是浮动在图表上方的工具提示。列范围上的文本似乎具有更高的z-index。但无论我尝试将它设置在div样式表上，它都会显示出来。我喜欢在html中有点细节，因为我想把它变成一个超链接标签。

plotOptions: {
        columnrange: {

                dataLabels: {
                    inside: true,
                    enabled: true,
                    useHTML: true,

                    formatter: function () {
                        if (this.y === this.point.low) {
                    return '<div style="padding:2px;text-align:center;color:black;overflow:hidden;width:' + (this.point.plotLow - this.point.plotHigh - 4) + 'px">' +      this.point.low + '°C - ' + this.point.high + '°C </div>';
                        }
                    }
                }
            }
    },

Answer 1

感谢Anto

我跟着副本。

我设法按照我想要的方式使用css

http://jsfiddle.net/cr1t/LdLn2/2/

.highcharts-data-labels {
    z-index: 1 !important;
}

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

.tooltip {
    padding:5px
}

并在工具提示上设置样式

tooltip: {
                backgroundColor: "rgba(255,255,255,1)",
                 style: {

                    padding: '1px'
                },
                shadow: false,
                useHTML: true,
                percentageDecimals: 2,
                formatter: function () {
                    return '<div class="tooltop">'+ this.point.category + '<br />'  +
                        'Temprature ' + this.point.low + '°C - ' + this.point.high + '°C </div>'
                }

        }

列范围上的工具提示问题

1 个答案: