CSS圖表樣式有助于創建漂亮的數據可視化效果。通過使用CSS的基本樣式和屬性，您可以創建出不同類型的圖表，如柱狀圖、線性圖和餅圖。

/*柱狀圖樣式*/
.bar-chart{
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 300px;
}
.bar{
width: 30%;
background-color: #4a90e2;
transition: height .5s;
}
.bar:hover{
height: 80%;
}
.bar span{
display: block;
text-align: center;
margin-top: 5px;
font-size: 14px;
}
/*線性圖樣式*/
.line-chart{
position: relative;
height: 300px;
overflow: hidden;
}
.line-chart:before,
.line-chart:after{
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #ccc;
top: 50%;
}
.line-chart:before{
transform: rotate(45deg);
left: -50%;
}
.line-chart:after{
transform: rotate(-45deg);
right: -50%;
}
.line{
width: 5%;
height: 5%;
background-color: #4a90e2;
position: absolute;
bottom: -15px;
transition: transform .5s;
}
.line:hover{
transform: scale(2);
}
.line span{
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
}
/*餅圖樣式*/
.pie-chart{
position: relative;
height: 300px;
}
.pie{
width: 100%;
height: 100%;
position: absolute;
clip: rect(0, 150px, 300px, 0);
border-radius: 50%;
transform: rotate(-90deg);
}
.pie .half{
position: absolute;
width: 100%;
height: 100%;
clip: rect(0, 150px, 300px, 0);
border-radius: 50%;
}
.pie .half:first-child{
background-color: #4a90e2;
transform: rotate(0deg);
}
.pie .half:last-child{
background-color: #ccc;
transform: rotate(180deg);
}
.percent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
font-weight: bold;
}

例如，上面的CSS代碼適用于柱狀圖、線性圖和餅圖樣式的實現。您可以調整這些樣式以適合您的需求，例如更改顏色、高度和動畫時間。