<div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>
  • 咨詢電話:
    15628812133
    28
    2023/09

    為餅圖添加對應顏色邊框

    發布時間:2023-09-28 15:45:23
    發布者:三國殺干的
    瀏覽量:
    0

                    為餅圖添加對應顏色邊框

            大家看這張圖,搭眼望去很簡單,只是一個大圓套小圓,然后外側三條數據而已。

            但是仔細觀察,每一條展示數據外側都有一條對應顏色的邊框,而且還要有邊距,最要命的是這個。。。

    為餅圖添加對應顏色邊框

            噔噔咚!

            是的,邊框顏色是不支持回調函數的,這就意味著我們不能統一設置數據的顏色,去博客找了一圈都沒有這樣設置的。但是在社區卻找到一個。

    為餅圖添加對應顏色邊框

            這里原版代碼過于冗長,不給大家展示了??梢渣c擊這里去這里查看。

            這個作者并沒有統一設置bordercolor,而是通過先構造數據通過循環為每一條數據都添加一條自己的borderColor。

            話不多說直接上關鍵部分代碼。

    為餅圖添加對應顏色邊框

            首先分別構建兩個數組,代表填充顏色,和邊框顏色。然后在構建你的data數據,通過循環data數據根據索引值來添加對應的顏色。還需要添加陰影顏色shadowColor,給圖表一種發光的效果,這里可以直接用填充顏色,然后模糊度給到10就可以。

        為餅圖添加對應顏色邊框

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

         為餅圖添加對應顏色邊框

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

         為餅圖添加對應顏色邊框

            最后的得到這樣的效果。

             為餅圖添加對應顏色邊框


    關鍵詞:
    返回列表
    国产办公室秘书无码精品_AV无码天堂AV_A级毛片无码专区免费看
    <div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>