JavaScript
// 出生率
const lineChart = document.querySelector("#line-chart");
const year = [
"93年", "94年", "95年", "96年", "97年", "98年", "99年", "100年", "101年", "102年", "103年", "104年", "105年", "106年", "107年", "108年", "109年", "110年",
];
const born = [
"37.83", "36.25", "35.39", "35.63", "34.38", "33.3", "28", "32.01", "35.92", "29.11", "31.08", "39.73", "41.28", "40.3", "38.57", "38.42", "35.99", "35.49"
];
const bornLineChart = new Chart(lineChart, {
type: 'line',
data: {
labels: year,
datasets: [{
label: '出生率',
data: born,
borderColor: 'rgba(103, 58, 183, 0.6)',
fill: false,
pointBackgroundColor: 'rgba(103, 58, 183, 1)',
pointRadius: 4,
pointHoverRadius: 8,
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
gridLines: {
display: false,
}
}],
},
layout: {
padding: {
left: 50,
right: 50,
top: 0,
bottom: 50,
}
},
title: {
display: true,
text: '桃園市一般生育率',
fontSize: 25,
},
tooltips: {
titleFontSize: 17,
bodyFontSize: 15,
xAlign: 'center',
yAlign: 'top',
},
},
});
// 確診人數
const barChart = document.querySelector("#bar-chart");
const country = ['美國', '日本', '台灣', '德國', '俄羅斯', '韓國', '巴西'];
const totalNum = ['103124043', '33113074', '9937216', '38002114', '21855727', '30433895', '36987682'];
const diagnosedBarChart = new Chart(barChart, {
type: 'bar',
data: {
labels: country,
datasets: [{
label: '總確診數',
data: totalNum,
backgroundColor: 'rgba(244, 67, 54, 0.3)',
hoverBackgroundColor: 'rgba(244, 67, 54, 0.7)',
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
layout: {
padding: {
left: 50,
right: 50,
top: 0,
bottom: 50,
}
},
title: {
display: true,
...