东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
28
2023/09

為餅圖添加對(duì)應(yīng)顏色邊框

發(fā)布時(shí)間:2023-09-28 15:45:23
發(fā)布者:三國(guó)殺干的
瀏覽量:
0

                為餅圖添加對(duì)應(yīng)顏色邊框

        大家看這張圖,搭眼望去很簡(jiǎn)單,只是一個(gè)大圓套小圓,然后外側(cè)三條數(shù)據(jù)而已。

        但是仔細(xì)觀察,每一條展示數(shù)據(jù)外側(cè)都有一條對(duì)應(yīng)顏色的邊框,而且還要有邊距,最要命的是這個(gè)。。。

為餅圖添加對(duì)應(yīng)顏色邊框

        噔噔咚!

        是的,邊框顏色是不支持回調(diào)函數(shù)的,這就意味著我們不能統(tǒng)一設(shè)置數(shù)據(jù)的顏色,去博客找了一圈都沒有這樣設(shè)置的。但是在社區(qū)卻找到一個(gè)。

為餅圖添加對(duì)應(yīng)顏色邊框

        這里原版代碼過(guò)于冗長(zhǎng),不給大家展示了。可以點(diǎn)擊這里去這里查看。

        這個(gè)作者并沒有統(tǒng)一設(shè)置bordercolor,而是通過(guò)先構(gòu)造數(shù)據(jù)通過(guò)循環(huán)為每一條數(shù)據(jù)都添加一條自己的borderColor。

        話不多說(shuō)直接上關(guān)鍵部分代碼。

為餅圖添加對(duì)應(yīng)顏色邊框

        首先分別構(gòu)建兩個(gè)數(shù)組,代表填充顏色,和邊框顏色。然后在構(gòu)建你的data數(shù)據(jù),通過(guò)循環(huán)data數(shù)據(jù)根據(jù)索引值來(lái)添加對(duì)應(yīng)的顏色。還需要添加陰影顏色shadowColor,給圖表一種發(fā)光的效果,這里可以直接用填充顏色,然后模糊度給到10就可以。

    為餅圖添加對(duì)應(yīng)顏色邊框

        中心圓的思路與外圈相同,只是設(shè)置中心圓的寬度遠(yuǎn)遠(yuǎn)小于外全圓就可以,設(shè)置一條數(shù)據(jù),就會(huì)展示一個(gè)圓。不要忘記關(guān)閉圖例和提示框。這里如下設(shè)置漸變色就能使顏色從圓心發(fā)往四周。

     為餅圖添加對(duì)應(yīng)顏色邊框

        數(shù)據(jù)之間的邊距肯定是夾雜在數(shù)據(jù)之中的,那我們可以在構(gòu)造data數(shù)據(jù)時(shí)為他額外添加一條顏色為空,name為空的數(shù)據(jù),這里的數(shù)據(jù)值最好不要寫固定的,可以根據(jù)數(shù)據(jù)值的百分比來(lái)添加。

     為餅圖添加對(duì)應(yīng)顏色邊框

        最后的得到這樣的效果。

         為餅圖添加對(duì)應(yīng)顏色邊框


關(guān)鍵詞:
返回列表