Highcharts 4.1.1 在指定字体颜色时向数据标签添加严重的阴影

Question

我注意到如果更改字体颜色，最新版本的 Highcharts (v.4.1.1) 会向数据标签添加严重的阴影。

例如 - 这是条形图演示的 jsfiddle：

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/

这是完全相同的代码，但有一个变化 - 为数据标签添加了一个颜色参数：

plotOptions: {
    bar: {
        dataLabels: {
            color: '#999',
            enabled: true
        }
    }
}

你可以在这里看到结果：http://jsfiddle.net/wgLnuft5/

这使得标签实际上不可读。

你能在指定数据标签颜色的同时阻止这种情况吗？

Answer 1

是的，您可以完全移除阴影，或者指定特定的阴影颜色。

移除阴影（通过覆盖默认的 textShadow 样式）(JSFiddle):

plotOptions: {
    bar: {
        dataLabels: {
            color: '#E0E0E0',
            enabled: true,
            style: {
                textShadow: ''
            }
        }
    }
}

设置特定的textShadow颜色（JSFiddle）：

plotOptions: {
    bar: {
        dataLabels: {
            color: '#E0E0E0',
            enabled: true,
            style: {
                textShadow: '0 0 6px #FF3399, 0 0 3px #FF3399'
            }
        }
    }
}

textShadow 的默认值为 (API reference):

"textShadow": "0 0 6px contrast, 0 0 3px contrast"

您的特定颜色值有问题的原因是，当颜色设置为 contrast 时，它会尝试获取文本颜色的对比色。在这种特殊情况下，对比色与文本颜色非常相似，这使得它不可读。

根据 API 这种样式自 Highcharts 4.1.0 版开始使用。

Highcharts 4.1.1 在指定字体颜色时向数据标签添加严重的阴影

Highcharts 4.1.1 adding a severe drop shadow to data labels if you specify a font color

highcharts