在使用highcharts繪制圖表的時(shí)候决瞳，不知道小伙伴們有沒有遇到到一個(gè)問題，就是ataLabels里的文字會(huì)有陰影芍瑞，字體為白色則會(huì)有黑色的陰影晨仑，字體為藍(lán)色則會(huì)有白色的陰影。效果如下：

QQ圖片20170821151650.png

看起來是不是很惡心？：榧骸Ｍ椎省！
該效果的代碼如下：

        var obj={
            chart:{
                 backgroundColor: null,
                 style:{
                    // color:"#fff"
                 }
            },
            title:{
                text:null
            },
            
            xAxis:{
                categories:["現(xiàn)在","17點(diǎn)","20點(diǎn)","23點(diǎn)","02點(diǎn)","05點(diǎn)","08點(diǎn)","11點(diǎn)","14點(diǎn)"],
                labels:{
                    style:{
                        color:"#fff"
                    }
                }
            },
            yAxis:{
                title:{
                    text:null
                },
                categories:[17,22,27,32,37],
                labels:{
                    style:{
                        color:"#fff"
                     }
                }
            },
            plotOptions: {
                series: {
                    animation: false
                },
                line:{
                    dataLabels:{
                        enabled:true,
                        // color:"#fff",
                        style:{
                            color: "#fff",
                    fontFamily: "宋體",
                    textShadow:false
                        },
                        text:{
                            outline:"none"
                        }
                    },
                    enableMouseTracking:false
                }
            },
            series:[
                {
                    data:[28,26,26,25,22,23,24,26,29],
                    color:"#fff"
                }
            ],
            credits:{
                enabled:false
            },
            legend:{
                enabled:false
            }
        }
        var charts=$("#center").highcharts(obj);

注意哦答捕，

dataLabels:{
            enabled:true,
            style:{
                    color: "#fff",
            fontFamily: "宋體",
            textShadow:false
            }
}

dataLabels里style已經(jīng)設(shè)置了textShadow:false逝钥，但是一點(diǎn)效果都有沒有哦。說明不是文字陰影的問題拱镐。
也許會(huì)有小伙伴說直接給dataLabels設(shè)置取消陰影艘款，答案是依然沒有效果滴哦。
也許是我不夠細(xì)心沃琅，反正翻遍highcharts文檔我也沒有找到相關(guān)解決方案哗咆。
難道，就真的不能解決這個(gè)問題嗎益眉？
答案當(dāng)然是否定的岳枷，不然寫下這篇blog不是沒有任何意義了不是？呜叫！

打開開發(fā)者模式進(jìn)行調(diào)試，選中l(wèi)ine上的dataLabels殿衰，不知道小伙伴們有沒有發(fā)現(xiàn)在Elements面板會(huì)有如下代碼被選中：

Feige圖片20170820104320.png

其中有fill="#000000"朱庆，stroke="#000000''，整個(gè)圖表有顏色的地方用的都是白色闷祥，那么娱颊，惡心的所謂的黑色陰影就只能是它們產(chǎn)生的效果。

于是凯砍，剛開始的時(shí)候箱硕，我嘗試如下解決方案，就是根據(jù)上圖選中的代碼在定義的圖表后邊添上如下兩行代碼：

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

效果如下圖：

11.png

如我所愿悟衩，問題得到解決剧罩。但覺得不完美，感覺很突兀座泳，因?yàn)楸M管Elements面板有相關(guān)代碼提示惠昔，但是html文檔里是找不到相關(guān)信息的哦。如果讓其它小伙伴兒看的話挑势，看到這里一開始說不定也會(huì)懵逼的吧镇防。

想了想，既然圖表所有的元素都是在配置的對(duì)象里設(shè)置的潮饱，也許可以嘗試在配置對(duì)象里解決来氧。既然類名是highcharts-text-outline，那就是跟text-outline有關(guān)系了，何不照配置對(duì)象的方式嘗試如下設(shè)置啦扬？中狂！

                        dataLabels:{
                        enabled:true,
                        // color:"#fff",
                        style:{
                            color: "#fff",
                    fontFamily: "宋體",
                    textShadow:false,
                        },
                        text:{
                            outline:"none"
                        }
                    }

QQ圖片20170821151650.png

呵呵，惡心的黑色text-outline又出現(xiàn)了考传。
落落不灰心吃型，想想title等元素的text屬性都是在style里設(shè)置的，瞬間又有了“解決方案”僚楞。代碼如下：

                    dataLabels:{
                        enabled:true,
                        // color:"#fff",
                        style:{
                            color: "#fff",
                    fontFamily: "宋體",
                    textOutline:"none"
                        }
                    }

這次真的解決了哦勤晚，不信看圖：

6735293-eff829f99fab06f5.png