資訊專欄INFORMATION COLUMN
摘要：有一個在郵件中用餅圖直觀地顯示用戶的各項消費比例的需求。第一步得到一個小扇形。附上各郵箱對的支持情況免費領取驗證碼內容安全短信發送直播點播體驗包及云服務器等套餐更多網易技術產品運營經驗分享請訪問網易云社區。文章來源網易云社區
本文由作者鄒欣華授權網易云社區發布。
有一個在郵件中用餅圖直觀地顯示用戶的各項消費比例的需求。郵箱中不能用js，純css實現餅圖，只能通過后端模版渲染數據，所以數據越少越簡單越好。
想到css3的transform的rotate屬性，rotate通過對指定的角度參數對元素指定一個角度的旋轉。圓形的話用border-radius就可以實現，但是怎樣通過旋轉生成餅圖。一個完整的圓不論怎樣旋轉都還只是一個圓，達不到要讓每一個模塊按比例顯示出來的效果。但是可以用多個扇形組合成一個圓，然后通過旋轉的角度差，顯示各自的比例。旋轉以后顯示需要的部分，不需要的部分就要隱藏起來。又聯想到了css2的clip屬性。可以利用clip裁剪出想要的部分，rotate旋轉出百分占比的區域，其余的部分通過透明遮罩隱藏起來，border-radius屬性實現圓形效果。
第一步得到一個小扇形。
裁剪圓的右邊一半（clip:rect(0px,100px,200px,0px)），并且將右邊半圓旋轉20度（transform:rotate(20deg)）。
第二步，接著生成多個扇形合成一個完整的圓。因為需求中不確定哪些內容需要展示，但是知道各自的數量以及總數，就可以計算出各自的占比，遮罩旋轉的角度是前面所有扇形旋轉角度的累加，扇形旋轉的角度就是其百分比乘以360得出。
這里需要提前在css中把所有可能出現的種類及對應的顏色定義好。clip屬性只能在設置了”position:absolute”或者”position:fixed”屬性起作用
透明遮罩的公共樣式
.hold {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
}
扇形區域的公共樣式
.pie {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,100px,200px,0px);
border-radius:100px;
}
第三步，將所有的扇形渲染完成就是一個完整的餅圖了。因為數據是動態的所以需要特殊處理一下占比大于50%的情況。如果第一個扇形占比大于50%，需要旋轉180度之后，再寫一個同樣顏色的扇形區域接著之前的旋轉剩余的角度。旋轉角度通過后端模版計算出來，所以通過style來定義。
還有一種特殊情況是扇形旋轉的總角度和大于180，但是該扇形區域還有一部分未顯示，需要將該部分旋轉180減去前面部分的總和再寫一個同樣顏色的扇形區域接著之前的旋轉該部分剩余的角度。
最后的結果圖。
第一次接觸到郵件中的需求，后來發現郵箱客戶端css3的transform特性不支持，最后只能將餅圖轉換成圖片放在頁面中。并且考慮要outlook等郵箱客戶端內核的不同，最好用table布局，并且圖片要在頁面中用img標簽引入，譬如margin這樣的屬性會失效等。
以上只是我的思路與做法，歡迎各路大神支招改進。 附上各郵箱對css的支持情況：https://www.campaignmonitor.com/css/
免費領取驗證碼、內容安全、短信發送、直播點播體驗包及云服務器等套餐
更多網易技術、產品、運營經驗分享請訪問網易云社區。
文章來源： 網易云社區
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/25340.html
摘要：前言微信小程序在當前比較火熱，秉著學習的目的和態度，仿都可手機點餐寫了一個微信小程序，實現了大致功能。那么，我給大家介紹下這個微信小程序。 前言 微信小程序在當前比較火熱，秉著學習的目的和態度，仿CoCo都可手機點餐寫了一個微信小程序，實現了大致功能。那么，我給大家介紹下這個微信小程序。 使用到的工具： 1.Visual Studio Code 編譯器 2.微信web開發者工具 3....
摘要：如何更好的學習一門技術，去把它的官方文檔仔細看一遍最近這段時間一有空就會去刷一會官方文檔，寫點感受總結一下。官方文檔上的評論尤其要注意，有不少評論很有價值。 如何更好的學習一門技術，去把它的官方文檔仔細看一遍 最近這段時間一有空就會去刷一會 PHP 官方文檔，寫點感受總結一下。 起因 我開始學習編程應該算是在大二學 C語言 課程，到了大三自學 PHP，之后用這門語言做了七八個外包項目，...
摘要：對于的解釋器，直接使用依賴包的名稱，即可安裝上。對應的包名，如果沒有報錯，說明是解釋器自帶的包，反之，不是解釋器自帶的包。如果不是解釋器自帶的包，則需要具體查找安裝不上的具體原因，進一步解決。 在Python的學習的過程中，需要不斷的寫代碼，查看別人的代碼的運行效果。在這個過程中，我們需要不斷安裝程序的依賴包。 對于python2的解釋器，直接使用pip install 依賴包的名稱，...
閱讀 3724·2021-11-24 10:23
閱讀 2771·2021-09-06 15:02
閱讀 1274·2021-08-23 09:43
閱讀 2351·2019-08-30 15:44
閱讀 3045·2019-08-30 13:18
閱讀 779·2019-08-23 16:56
閱讀 1743·2019-08-23 16:10
閱讀 536·2019-08-23 15:08
