在網(wǎng)站建設(shè)的發(fā)展過程中，CSS一直很神奇，在我們使用的這些年它一直的不斷進(jìn)步，網(wǎng)站的內(nèi)容也得以更好的展示。最近我驚奇的發(fā)現(xiàn)CSS可以創(chuàng)建動態(tài)圖，今天就和大家分享下相關(guān)的經(jīng)驗。

說起來也非常簡單，也就是一段簡短的代碼，使用這么少量的CSS，你可以創(chuàng)建在特定角度開始和結(jié)束的漸變，并為餅圖的每個“部分”定義一種顏色。代碼如下：

div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

我想我可以用它來代替圖表庫，用于我正在為新開發(fā)的數(shù)據(jù)儀表板項目，使用JavaScript，您可以使用這個小的一行程序來總和對數(shù)據(jù)數(shù)組中的每個值進(jìn)行累加，得到一個總和。然而，還有另一種方法。這種方法包括使用<circle />元素并將其放置在餅圖的中心。如果填充了<circle />匹配圖表所在位置的背景色。

圖表的顏色總是感覺很麻煩。大多數(shù)時候，我使用的顏色是在CSS中定義的，所有這些東西都是在JavaScript中發(fā)生的，那么如何在JavaScript中使用CSS變量呢？在我們的示例站點中，很多網(wǎng)站風(fēng)格“所有的東西”和使用這一招，我可以公開CSS變量，這樣就可以通過它們的名字來引用它們。希望這些可以幫助到您，