https://www.kuniumiai-sec.co.jp/js/simulator.js

1$(function() {
2	function orgRound(value, base) {
3		return Math.round(value * base) / base;
4	}
5	var result1;
6	var colNum = 60;
7	var body1 = $(".top__simulation-form1-body");
8	var body2 = $(".top__simulation-form2-body");
9	body1.hide();
10	body2.hide();
11	$("#form1-submit").click(function() {
12		var inputNumber1 = document.getElementById("form1-1").value;
13		var inputNumber2 = document.getElementById("form1-2").value;
14		var inputNumber3 = document.getElementById("form1-3").value;
15		result1 = inputNumber1 * Math.pow(1 + (inputNumber3 / 100), inputNumber2);
16		$("#form1-result").text(orgRound(result1 * 10000, 1).toLocaleString());
17
18		// graph
19		am4core.ready(function() {
20			am4core.addLicense("CH292024576");
21			am4core.useTheme(am4themes_animated);
22			var chart = am4core.create("graph1", am4charts.XYChart);
23			chart.data = [];
24			for(var i = 0; i <= inputNumber2; i++) {
25				chart.data.push({
26					"year": i,
27					"original": inputNumber1,
28					"profit": orgRound(inputNumber1 * Math.pow(1 + (inputNumber3 / 100), i) - inputNumber1, 1),
29				});
30			}
31
32			var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
33			categoryAxis.dataFields.category = "year";
34			categoryAxis.title.text = "年数（年後）";
35			categoryAxis.renderer.grid.template.location = 0.5;
36			categoryAxis.renderer.minGridDistance = 20;
37			categoryAxis.startLocation = 0.5;
38			categoryAxis.endLocation = 1;
39
40			var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
41			valueAxis.title.text = "金額（万円）";
42
43			var series = chart.series.push(new am4charts.LineSeries());
44			series.name = "元本";
45			series.dataFields.categoryX = "year";
46			series.dataFields.valueY = "original";
47			series.tooltipHTML = "";
48			series.tooltipText = "[#000]{valueY.value}万円[/]";
49			series.tooltip.background.fill = am4core.color("#FFF");
50			series.tooltip.getStrokeFromObject = true;
51			series.tooltip.background.strokeWidth = 3;
52			series.tooltip.getFillFromObject = false;
53			series.fillOpacity = 0.6;
54			series.strokeWidth = 2;
55			series.stacked = true;
56			series.stroke = am4core.color("#66ccff");
57			series.fill = am4core.color("#66ccff");
58
59			var series2 = chart.series.push(new am4charts.LineSeries());
60			series2.name = "運用収益";
61			series2.dataFields.categoryX = "year";
62			series2.dataFields.valueY = "profit";
63			series2.tooltipHTML = "";
64			series2.tooltipText = "[#000]{valueY.value}万円[/]";
65			series2.tooltip.background.fill = am4core.color("#FFF");
66			series2.tooltip.getStrokeFromObject = true;
67			series2.tooltip.background.strokeWidth = 3;
68			series2.tooltip.getFillFromObject = false;
69			series2.sequencedInterpolation = true;
70			series2.fillOpacity = 0.6;
71			series2.strokeWidth = 2;
72			series2.stacked = true;
73			series2.stroke = am4core.color("#093c99");
74			series2.fill = am4core.color("#093c99");
75

76			chart.cursor = new am4charts.XYCursor();
77			chart.cursor.xAxis = categoryAxis;
78			chart.scrollbarX = new am4core.Scrollbar();
79
80			chart.legend = new am4charts.Legend();
81			chart.legend.position = "bottom";
82		});
83		body1.slideDown(400);
84	});
85	$("#form2-submit").click(function() {
86		var inputNumber3 = document.getElementById("form1-3").value;
87		var inputNumber4 = document.getElementById("form2-1").value;
88		var inputNumber5 = document.getElementById("form2-2").value;
89		var t5num = 0;
90		var rArray = [];
91		for(var i = 0; i <= colNum; i++) {
92			rArray[i] = [];
93			rArray[0][1] = result1;
94			//å¹´é½¢
95			rArray[i][0] = Number(inputNumber5) + i;
96			$("#t_1_" + i).text(rArray[i][0] + "æ­³");
97			//元本
98			if(i == 0) {
99				rArray[i][1] = result1;
100			} else {
101				rArray[i][1] = rArray[i-1][3];
102			}
103			$("#t_2_" + i).text(orgRound(rArray[i][1], 1).toLocaleString());
104			//取崩
105			rArray[i][2] = rArray[i][1] * inputNumber4 / 100;
106			$("#t_3_" + i).text(orgRound(rArray[i][2], 1).toLocaleString());
107			//残高
108			rArray[i][3] = (rArray[i][1] - rArray[i][2]) * (1 + inputNumber3 / 100);
109			$("#t_4_" + i).text(orgRound(rArray[i][3], 1).toLocaleString());
110			//取崩総額
111			if(i == 0) {
112				rArray[i][4] = rArray[i][2];
113			} else {
114				rArray[i][4] = rArray[i-1][4] + rArray[i][2];
115			}
116			$("#t_5_" + i).text(orgRound(rArray[i][4], 1).toLocaleString());
117		}
118
119		// graph
120		am4core.ready(function() {
121			am4core.addLicense("CH292024576");
122			am4core.useTheme(am4themes_animated);
123			var chart = am4core.create("graph2", am4charts.XYChart);
124			chart.data = [];
125			for(var i = 0; i <= colNum; i++) {
126				chart.data.push({
127					"year": rArray[i][0],
128					"total": rArray[i][3],
129				});
130			}
131
132			var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
133			categoryAxis.dataFields.category = "year";
134			categoryAxis.title.text = "年齢（歳）";
135			categoryAxis.renderer.grid.template.location = 0.5;
136			categoryAxis.renderer.minGridDistance = 20;
137			categoryAxis.startLocation = 0.5;
138			categoryAxis.endLocation = 1;
139
140			var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
141			valueAxis.title.text = "運用資産残高（万円）";
142
143			var series = chart.series.push(new am4charts.LineSeries());
144			series.name = "運用資産残高";
145			series.dataFields.categoryX = "year";
146			series.dataFields.valueY = "total";
147			series.tooltipHTML = "";
148			series.tooltipText = "[#000]{valueY.value}万円[/]";
149			series.tooltip.background.fill = am4core.color("#FFF");
150			series.tooltip.getStrokeFromObject = true;
151			series.tooltip.background.strokeWidth = 3;
152			series.tooltip.getFillFromObject = false;
153			series.fillOpacity = 0.6;
154			series.strokeWidth = 2;
155			series.stacked = true;
156			series.stroke = am4core.color("#018ace");
157			series.fill = am4core.color("#018ace");
158

159			chart.cursor = new am4charts.XYCursor();
160			chart.cursor.xAxis = categoryAxis;
161			chart.scrollbarX = new am4core.Scrollbar();
162		});
163		body2.slideDown(400);
164	});
165});