在 Highcharts 树形图上的标签文本中添加彩色边框（不是阴影）答案

【问题标题】：Adding a colored border (not shadow) to the label text on a Highcharts treemap在 Highcharts 树形图上的标签文本中添加彩色边框（不是阴影）
【发布时间】：2015-08-05 16:21:19
【问题描述】：

我希望我的 Highcharts 树形图上的标签文本是带有黑色边框的白色，以便它在所有颜色上都一致且清晰可见。这可能吗？我玩过 textShadow 选项，它在 Chrome 中看起来不错（虽然不是很好），但在 Internet Explorer 中看起来非常不专业。在这里查看小提琴：

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",
                    }
                },
            }],
        }],
    });
})

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

谢谢！

【问题讨论】：

标签： css internet-explorer highcharts treemap text-coloring

【解决方案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',
....

【讨论】：

这正好提供了我要求的显示输出，感谢 Kacper！太糟糕了，这需要 useHTML 标志，因为它不再可能在文本上有 cursor: 'pointer' 效果，但这是一个不同的问题。

【解决方案2】：

我认为使用 textShadow 属性是不可能的，IE 不能很好地解释该属性。但是，您可以在标签上添加背景以更显眼：

$(function() {
  $('#container').highcharts({
    title: "",
    series: [{
      type: "treemap",
      data: [{
        name: 'Name One',
        value: 1,
        color: "#FFFF00"
      }, {
        name: 'Name Two',
        value: 1,
        color: '#000099',
      }],
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true,
          align: 'center',
          borderRadius: 5,
          backgroundColor: 'rgba(255, 255, 255, 1)',
          style: {
            fontSize: '20px',
            color: '#000',
          }
        },
      }],
    }],
  });
})

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>

<div id="container"></div>

您可以从文档中获得灵感：

http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.backgroundColor

【讨论】：

这个解决方案不适用于我的特殊情况，因为我有一些比它们的标签文本略大的框，但框的颜色与可视化的含义相关，所以可以' t 被白色文本背景覆盖。（我已经更新了我提供的示例以反映这一点。）但是感谢您的建议。