欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

html 動態餅圖代碼

html
洪振霞2年前9瀏覽0評論

HTML動態餅圖代碼是網頁制作中常見的一個元素。動態餅圖能夠清晰地展示數據占比，更加直觀地呈現給用戶，提高用戶體驗。

<html>
<head>
<title>動態餅圖</title>
<script src="https://cdn.jsdelivr.net/npm/@antv/g2@4.1.7/umd/g2.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
const data = [
{ item: 'A', percentage: 0.4 },
{ item: 'B', percentage: 0.21 },
{ item: 'C', percentage: 0.14 },
{ item: 'D', percentage: 0.11 },
{ item: 'E', percentage: 0.08 },
{ item: 'F', percentage: 0.06 }
];
const chart = new G2.Chart({
container: 'container',
forceFit: true,
height: 500,
padding: [20, 60, 20, 60]
});
chart.source(data);
chart.coord('theta');
chart.tooltip({
showTitle: false,
itemTpl: '
  • {name}: {value}
    • '
});
chart.intervalStack()
.position('percentage')
.color('item')
.label('percentage', {
formatter: (val, item) =>{
return item.point.item + ': ' + val;
}
})
.tooltip('item*percentage', (item, percentage) =>{
percentage = (percentage * 100).toFixed(2) + '%';
return {
name: item,
value: percentage
}
})
.style({
lineWidth: 1,
stroke: '#fff'
});
chart.render();
</script>
</body>
</html>

    以上為HTML動態餅圖的代碼，使用的是antv的G2.js庫，其中數據使用的是數組類型，每個元素包含了名稱和所占比例。餅圖的樣式可以進行修改和定制，如顏色，標簽等。此外，通過調試可以很好地了解代碼實現的具體功能。