css - 向 Highcharts 树形图上的标签文本添加彩色边框(不是阴影)

Question

我希望我的 Highcharts 树状图上的标签文本为白色，并带有黑色边框，以便在所有颜色上保持一致且清晰可见。这可能吗？我玩过 textShadow 选项，它在 Chrome 中看起来不错(虽然不是很好)，但在 Internet Explorer 中看起来很不专业。在这里查看 fiddle :

https://jsfiddle.net/k1hohozg/4/

$(function () {
    $('#container').highcharts({
        title:  "",
        series: [{
            type: "treemap",            
            data: [
            {
                name: 'Name One',
                value: 20,
                color: "#FFFF00"
            }, {
                name: 'Name Two',
                value: 20,
                color: '#000099',
            }, {
                name: 'Name Three',
                value: 1,
                color: '#007799',
            }, {
                name: 'Name Four',
                value: 1,
                color: '#FFCC00',
            }
            ],

            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true,
                    align: 'center',
                    style: {
                        fontSize: '20px',
                        color: '#FFFFFF',
                        textShadow: "0 0 3px #000, 0 0 3px #000",
                    }
                },
            }],
        }],
    });
})

我不想使用“对比度”选项，因为我需要所有的文本看起来都一样，因此是白底黑边。使它在所有标准浏览器中看起来更好的最佳方法是什么？

谢谢!

Answer 1

没有默认的 Highcharts 方法来处理 IE 渲染不佳的文本阴影。可以将 useHTML 设置为 true 并添加多个将模仿阴影的标签。 (在 Chrome、Firefox 和 IE11 中看起来不错)。

示例:http://jsfiddle.net/yzLavxc9/2/

....
dataLabels: {
                    useHTML: true,
                    formatter: function () {
                        return '<div class=dataLabelContainer><div style="position: absolute; top: -1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: -1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; color: #fff;">'+this.key+'</div></div><div style="color: #fff;">'+this.key+'</div></div>';
                    },
                    enabled: true,
                    align: 'center',
                    style: {
                        fontSize: '20px',
....