关于highcharts显示数据时dataLabels存在阴影的问题

hhighcharts是一款流行易配置的图表库，不过在使用中依然会遇到一些问题，比如当显示图标中的item数据时，会出现以下这种文字阴影。

看起来体验貌似不好？尤其是大大屏幕上显示就更加没有辨识度了，因为使用者一眼注意到的是图表然后是数据，虽说有坐标轴，但这数据还得仔细辨认才是。

其实我们想要的是隔壁echarts这种…

这种：‘

看了一下文档自己摸索了一下，试了几种方法均无效果，比如dataLabels里style设置textShadow:false，修改背景色，但是都没用，但是真的解决不了了吗？
在chrome浏览器的开发者模式下进行调试，在我一层一层的抽丝剥茧后，发现选中目标元素上的数据时dataLabels 时， 检查元素的Elements出现以下代码：

什么东东？fill="#000000"，stroke="#000000’’，图表中并没有用到黑色，所谓的黑色阴影就只能是它了，怎么解决呢，最简单粗暴的的办法就是直接去掉它们咯：
在声明好之后对其进行处理：

$("tspan.highcharts-text-outline").css("fill","none");
$("tspan.highcharts-text-outline").css("stroke","none");

ok，完美解决~~
其实并不完美，highcharts配置性这么高怎么能用这种办法呢？看了一下类名是“highcharts-text-outline”，在dataLabels中加入以下代码

style:{
	color:'#eee',
	fontSize:'16px',
    textOutline:"none"
  }

果然ok，效果如下：

白色无textOutline是这样的：

看起来自然多了吧，数据阴影问题至此完美解决，其实我觉得highcharts本意是好的，他为了提高字体和周边颜色的对比度加上的阴影。我当初试了几种背景颜色都有阴影，当然默认的是黑色， 如果将字体直接改为白色阴影就没那么明显，效果会好一些，以下是白色有textOutline的：

另外看属性是textoutline，所以说明其实不是阴影而是在字体外描了一圈颜色。

注：文章属于作者原创，可随意使用，转载请注明出处