首页 > 技术文章 > highcharts的dataLabels如何去处阴影

fancyblogs 2017-05-02 11:14 原文

问题: 在使用highcharts生成的图标中dataLabels是有阴影的,通常是影响美观,那么如何去除阴影呢?

原因:是因为highcharts将dataLabels生成的标签是tspan,里面有fill 和stroke属性,而且是tspan的属性而不是style里的样式,所有无法通过修改css样式进行修改.

解决方案:

1. useHTML: true,该属性可以让highcharts将dataLabels生成span标签,也没有fill和stroke属性;  (该属性官方解释为:https://api.hcharts.cn/highcharts#plotOptions.series.dataLabels.useHTML)

dataLabels: {
    useHTML: true,//标签作为HTML
}

 

生成的span标签

 

2. 网友利用js粗暴将tspan标签的属性改掉.但是这个方法真的无法推荐. 网友解决方案:http://blog.csdn.net/qq_26599807/article/details/53697257

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

 

推荐阅读