CSS圖表是Web開發(fā)中很重要的一部分。其中,折線圖是比較常用的一種。
下面是一個(gè)簡(jiǎn)單的折線圖的例子:
<div class="chart"> <svg> <polyline class="line" points="0,100 50,80 100,70 150,50 200,60 250,40 300,60 350,80 400,90 450,100" /> <polygon class="dot" points="50,80 100,70 150,50 200,60 250,40 300,60 350,80 400,90" /> </svg> </div> .chart { position: relative; width: 500px; height: 120px; background-color: #f8f8f8; } svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .line { fill: none; stroke: #00bcd4; stroke-width: 2; } .dot { fill: #00bcd4; stroke: #fff; stroke-width: 2; }
其中,polyline表示折線,points中的數(shù)字表示每個(gè)數(shù)據(jù)點(diǎn)的x和y坐標(biāo)。polygon表示數(shù)據(jù)點(diǎn)的圓點(diǎn),points中的數(shù)字也表示每個(gè)數(shù)據(jù)點(diǎn)的x和y坐標(biāo)。
需要注意的是,svg中的坐標(biāo)是從0開始的,因此需要在CSS中設(shè)置對(duì)應(yīng)坐標(biāo)。
如果需要添加坐標(biāo)軸和標(biāo)簽等,則需要更復(fù)雜的CSS和HTML代碼。
總之,折線圖是CSS圖表中比較基礎(chǔ)的部分,但是在實(shí)際開發(fā)中,可能需要根據(jù)實(shí)際情況進(jìn)行擴(kuò)展和改進(jìn)。