以下が要望に対応した実装例になります。
```html
<!DOCTYPE html>
<html>
<head>
<title>ローン返済計算</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<h1>ローン返済計算アプリ</h1>
<div>
<label for="amount">借入金額（万円）: </label>
<input type="number" id="amount" min="0">
</div>
<div>
<label for="interest">金利（%）: </label>
<input type="number" id="interest" min="0">
</div>
<div>
<label for="term">返済期間（年）: </label>
<input type="number" id="term" min="0">
</div>
<br>
<button onclick="calculate()">計算する</button>
<br><br>
<div>
<h2>計算結果</h2>
<p id="result"></p>
</div>
<div>
<h2>返済予定表</h2>
<canvas id="chart"></canvas>
</div>
<script>
var loanData = [];
function calculate() {
var amount = document.getElementById("amount").value;
var interest = document.getElementById("interest").value;
var term = document.getElementById("term").value;
if (amount && interest && term) {
var totalAmount = amount * (1 + (interest / 100));
var monthlyPayment = totalAmount / (term * 12);
document.getElementById("result").innerHTML = "総額: " + totalAmount.toFixed(2) + " 万円<br>月々の返済額: " + monthlyPayment.toFixed(2) + " 万円";
var currentYear = new Date().getFullYear();
for (var i = currentYear; i <= currentYear + parseInt(term); i++) {
loanData.push({
year: i,
payment: monthlyPayment * 12
});
}
renderChart();
} else {
document.getElementById("result").innerHTML = "全ての項目を入力してください。";
}
}
function renderChart() {
var labels = loanData.map(function(data) {
return "年 " + data.year;
});
var data = loanData.map(function(data) {
return data.payment;
});
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [
{
label: "返済額（万円）",
data: data,
fill: false,
borderColor: "rgb(75, 192, 192)",
tension: 0.1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
</body>
</html>
```
この実装例では、追加ボタンの要望に応えるためのコードが追加されています。具体的には、計算結果を保存するための`loanData`配列が追加されており、計算ボタンが押されるたびに返済予定データが`loanData`配列に追加されます。その後、`renderChart`関数が呼び出され、`loanData`を元にチャートの表示が更新されます。
また、面白いジョークを取り入れる場合、例えば以下のように計算ボタンを押した時にランダムなジョークが表示されるようにすることができます。
```html
<!DOCTYPE html>
<html>
<head>
<title>ローン返済計算</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<h1>ローン返済計算アプリ</h1>
<div>
<label for="amount">借入金額（万円）: </label>
<input type="number" id="amount" min="0">
</div>
<div>
<label for="interest">金利（%）: </label>
<input type="number" id="interest" min="0">
</div>
<div>
<label for="term">返済期間（年）: </label>
<input type="number" id="term" min="0">
</div>
<br>
<button onclick="calculate()">計算する</button>
<br><br>
<div>
<h2>計算結果</h2>
<p id="result"></p>
</div>
<div>
<h2>返済予定表</h2>
<canvas id="chart"></canvas>
</div>
<script>
var loanData = [];
function calculate() {
var amount = document.getElementById("amount").value;
var interest = document.getElementById("interest").value;
var term = document.getElementById("term").value;
if (amount && interest && term) {
var totalAmount = amount * (1 + (interest / 100));
var monthlyPayment = totalAmount / (term * 12);
document.getElementById("result").innerHTML = "総額: " + totalAmount.toFixed(2) + " 万円<br>月々の返済額: " + monthlyPayment.toFixed(2) + " 万円";
var jokes = [
"ローンがあれば、一文無しの状態でも手元に大金があるよ！ただし、働かないといけないけど。",
"ローン返済は春がおすすめ！薄い財布におさまるから。",
"ローンはお金がない人が使うものでしょ？だって、お金がある人にはローンいらないもん。",
"ローンは人生をドラマティックにする。ドラマチックに苦しむことも！"
];
var randomIndex = Math.floor(Math.random() * jokes.length);
var joke = jokes[randomIndex];
document.getElementById("result").innerHTML += "<br><br>" + joke;
var currentYear = new Date().getFullYear();
for (var i = currentYear; i <= currentYear + parseInt(term); i++) {
loanData.push({
year: i,
payment: monthlyPayment * 12
});
}
renderChart();
} else {
document.getElementById("result").innerHTML = "全ての項目を入力してください。";
}
}
function renderChart() {
var labels = loanData.map(function(data) {
return "年 " + data.year;
});
var data = loanData.map(function(data) {
return data.payment;
});
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [
{
label: "返済額（万円）",
data: data,
fill: false,
borderColor: "rgb(75, 192, 192)",
tension: 0.1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
</body>
</html>
```
この実装例では、ランダムなジョークを`jokes`配列に用意し、計算結果の後に表示される`joke`変数にランダムなジョークを代入しています。
