在現代社會中，GDP（國內生產總值）是我們監測經濟狀況的一項重要指標。有些人可能會覺得GDP數據太過抽象，難以理解和分析。但我們可以用可視化手段來使其更加直觀。
下面，我們提供一份用HTML的代碼，可以將GDP數據以餅圖的形式進行展示。
<!DOCTYPE html>
<html>
<head>
<title>GDP 餅圖可視化</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
</head>
<body>
<h2>2018-2021 年 GDP 數據餅圖</h2>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [
"2018年",
"2019年",
"2020年",
"2021年"
],
datasets: [{
label: 'GDP數據',
data: [13566.63, 14268.08, 10143.71, 14251.69],
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6"
]
}]
},
options: {
title: {
display: true,
text: '2018-2021 年GDP數據'
}
}
});
</script>
</body>
</html>代碼說明：
1. 在頭部引入Chart.js庫，這個庫可以幫助我們用JavaScript來生成各種類型的圖表。
2. 在body中創建一個canvas元素，用來展示我們的餅圖。
3. 在script標簽中，用JavaScript代碼生成我們的餅圖。
4. 我們使用pie類型的圖表，并且在data中傳入了我們的GDP數據，包括標簽和對應的數據。
5. 我們還可以通過options來設置一些圖表的顯示選項，比如標題。
通過這段HTML代碼，我們可以用Chart.js庫輕松地生成GDP數據的餅圖，從而直觀地看到各個年份的GDP數據的比例和分布情況。
上一篇css中間往外擴