HTML圓形統(tǒng)計(jì)代碼是一種常見的數(shù)據(jù)可視化方式,它能夠直觀地展示數(shù)據(jù)的比例關(guān)系。以下是一個(gè)簡(jiǎn)單的圓形統(tǒng)計(jì)示例:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="#eee" stroke-width="8" fill="none" /> <circle cx="50" cy="50" r="40" stroke="#f00" stroke-width="8" fill="none" stroke-dasharray="25.12 100" stroke-dashoffset="25.12" transform="rotate(-90 50 50)" /> </svg>
上文中的代碼使用了SVG元素來創(chuàng)建圓形統(tǒng)計(jì)圖。其中,circle
元素用于創(chuàng)建圓形,cx
和cy
屬性表示圓心坐標(biāo),r
屬性表示半徑,stroke
屬性表示邊框顏色,stroke-width
屬性表示邊框?qū)挾龋?code>fill屬性表示填充顏色。
與普通的圓形不同的是,圓形統(tǒng)計(jì)圖需要設(shè)置stroke-dasharray
和stroke-dashoffset
屬性來實(shí)現(xiàn)百分比的顯示。這兩個(gè)屬性能夠控制邊框的虛實(shí)比例,實(shí)現(xiàn)圓形的分塊效果。例如,stroke-dasharray="25.12 100"
表示圓形中被分為4段,第一段的長(zhǎng)度為25.12,后面3段的長(zhǎng)度都為100。這里的25.12是0到25%的路徑長(zhǎng)度,而100則是整個(gè)圓形的路徑長(zhǎng)度。
為了讓圓形的起點(diǎn)與Y軸負(fù)方向重合,還需要用到transform="rotate(-90 50 50)"
屬性,將圓形旋轉(zhuǎn)90度。這里的50 50
表示旋轉(zhuǎn)中心坐標(biāo)。
以上就是一段簡(jiǎn)單的HTML圓形統(tǒng)計(jì)代碼示例。通過修改其中的屬性值,我們能夠輕松地創(chuàng)建不同樣式和比例的圓形統(tǒng)計(jì)圖。