css如何绘制图表

CSS是网页设计中必不可少的一部分。除了布局和样式，CSS还可以用来绘制图表。下面我们就来看看如何用CSS绘制图表。首先，我们可以使用CSS的线性渐变来创建柱状图。我们可以先定义一个方块，再使用线性渐变将它变成一个柱状图。代码如下：

p{
    width: 50px;
    height: 200px;
    background: linear-gradient(to top,yellowgreen 0%,yellowgreen 70%,#fff 70%,#fff 100%);
    margin-right: 10px;
    display: inline-block;
    position: relative;
}
p:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-color: yellowgreen;
}

运行代码后，我们可以看到一个绿色的柱状图，右边有一个带数字的标签。这个标签可以用CSS的伪元素来创建。我们可以通过设置伪元素的content属性来设置标签上面的数字。代码如下：

css如何绘制图表

p:after{
    content: attr(data-value);
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

运行代码后，我们就可以在每个柱状图上面看到相应的数字了。除了柱状图，我们还可以用CSS来创建饼状图。我们可以先定义一个圆形，再使用border-radius和伪元素来实现饼状图的效果。代码如下：

p{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
}
p:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0,100px,200px,0);
    background-color: yellowgreen;
    transform-origin: 100% 50%;
    transform: rotate(45deg);
}
p:after{
    content: attr(data-value) "%";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 24px;
}

运行代码后，我们就可以看到一个带数字的饼状图了。绘制图表并不是CSS的强项，但是如果只需要简单的图表，使用CSS来绘制还是很方便的。希望以上内容对大家有所帮助。

相关推荐