在
网站建设的发展过程中,CSS一直很神奇,在我们使用的这些年它一直的不断进步,网站的内容也得以更好的展示。最近我惊奇的发现CSS可以创建动态图,今天就和大家分享下相关的经验。
说起来也非常简单,也就是一段简短的代码,使用这么少量的CSS,你可以创建在特定角度开始和结束的渐变,并为饼图的每个“部分”定义一种颜色。代码如下:
div {
background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
border-radius: 50%;
}
我想我可以用它来代替图表库,用于我正在为新开发的数据仪表板项目,使用JavaScript,您可以使用这个小的一行程序来总和对数据数组中的每个值进行累加,得到一个总和。然而,还有另一种方法。这种方法包括使用<circle />元素并将其放置在饼图的中心。如果填充了<circle />匹配图表所在位置的背景色。
图表的颜色总是感觉很麻烦。大多数时候,我使用的颜色是在CSS中定义的,所有这些东西都是在JavaScript中发生的,那么如何在JavaScript中使用CSS变量呢?在我们的示例站点中,很多网站风格“所有的东西”和使用这一招,我可以公开CSS变量,这样就可以通过它们的名字来引用它们。希望这些可以帮助到您,