let myChart; function calculate() { const compound = document.querySelector('[name="compound"]:checked').value; const initialInvestment = parseFloat(document.getElementById("initial_investment").value) * 10000; const period = document.querySelector('[name="period"]:checked').value; const periodicDeposit = parseFloat(document.getElementById("periodic_deposit").value || 0) * 10000; const monthlyInterestRate = parseFloat(document.getElementById("monthly_interest_rate").value) / 100; const investmentTerm = parseFloat(document.getElementById("investment_term").value);
const months = investmentTerm + 1; let balance = initialInvestment;
let depositArray = [0]; let earningsArray = [0];
for (let i = 1; i < months; i++) { const earnings = balance * monthlyInterestRate; const deposit = i % period === 0 ? periodicDeposit : 0; balance += earnings * compound + deposit; depositArray.push(deposit); earningsArray.push(earnings); } depositArray = depositArray.map((sum => value => sum += value)(0)); earningsArray = earningsArray.map((sum => value => sum += value)(0));
const principalData = new Array(months).fill((initialInvestment / 10000).toFixed(2)); const depositData = depositArray.map(e => (e / 10000).toFixed(2)); const earningsData = earningsArray.map(e => (e / 10000).toFixed(2));
const ctx = document.getElementById("myChart").getContext("2d"); const tooltip = { callbacks: { label: function(context) { let label = context.dataset.label || '';
if (label) { label += ': '; } if (context.parsed.y !== null) { label += context.parsed.y + " 万円"; } return label; } } };
Chart.defaults.font.size = 16;
// Destroy the previous chart instance if it exists if (myChart) { myChart.destroy(); } myChart = new Chart(ctx, { type: "bar", data: { labels: [...Array(months).keys()].map( (value, index) => index % 12 === 0 ? value / 12 + "年目" : "" ), datasets: [ { label: "元本", data: principalData, backgroundColor: "rgba(75, 192, 192, 0.5)", tooltip: tooltip }, { label: "積立金額", data: depositData, backgroundColor: "rgba(0, 172, 240, 0.5)", tooltip: tooltip }, { label: "運用収益", data: earningsData, backgroundColor: "rgba(255, 99, 132, 0.5)", tooltip: tooltip }, ], }, options: { scales: { y: { stacked: true, ticks: { callback: (value, index, values) => value + " 万円" }, }, x: { stacked: true, ticks: { autoSkip: false, maxRotation: 0, minRotation: 0, }, }, } } });
const finalAmount = balance; const totalDeposit = depositArray[investmentTerm]; const totalInvestment = initialInvestment + totalDeposit; const totalReturn = earningsArray[investmentTerm]; var num2 = finalAmount.toFixed(0); num2 = Number(num2); var num3 = totalReturn.toFixed(0); num3 = Number(num3); const yield = (totalReturn / totalInvestment * 100).toFixed(0);
const resultElement = document.getElementById("result"); resultElement.innerHTML = `
投資金額 | ${totalInvestment.toLocaleString()}円 |
---|---|
初期投資額 | ${initialInvestment.toLocaleString()}円 |
積立額 | ${totalDeposit.toLocaleString()}円 |
▼ ▼ ▼ | |
運用後金額 | ${num2.toLocaleString()}円 |
運用収益 | ${num3.toLocaleString()}円 |
利回り | ${yield}% |
`; }
document .getElementById("calculateButton") .addEventListener("click", calculate);
[...document.querySelectorAll('[name="period"]')].forEach(e => e.addEventListener('change', () => { document.getElementById("periodic_deposit").disabled = document.querySelector('[name="period"]:checked').value === 0; calculate(); }));
[...document.querySelectorAll('[name="compound"]')].forEach(e => e.addEventListener('change', calculate));
// ボタン要素を取得 var calculateButton = document.getElementById('calculateButton');
// ボタンがクリックされたときの処理 calculateButton.addEventListener('click', function() { // #result要素を取得 var resultElement = document.getElementById('result');
// paddingを追加 resultElement.style.padding = '5px'; });