如何将甜甜圈图中Group LTD Plan数值按月度计算并显示在指定HTML位置？

问题根源 #

1. 重复onload属性冲突：body标签同时声明两个onload事件，浏览器仅会执行最后一个（myFunction），且该函数内是硬编码的固定值12，并非实际计算的月度数值。
2. 数值更新逻辑缺失：点击「Calculate」按钮时仅更新了甜甜圈图表，未同步更新底部的月度数值显示。
3. HTML标签不规范：部分<font>标签未闭合，虽不影响功能但不符合语法规范。

修复方案 #

1. 合并body的onload事件，页面加载时直接调用图表初始化函数，同时在该函数内完成月度数值的计算与显示。
2. 在hpmpGraph函数中新增月度数值计算逻辑（全年Group LTD Plan值np除以12），并通过textContent更新到指定元素。
3. 移除冗余的myFunction，将数值更新逻辑整合到图表计算函数中，确保每次点击「Calculate」都同步更新图表和数值。
4. 修复HTML标签闭合问题，规范代码结构。

修复后的完整代码 #

JavaScript代码 #

function hpmpGraph() {
  // 获取表单输入并转换为数字，避免非数字输入报错
  const hp = parseFloat(document.hpmpForm.HP.value) || 0;
  const mp = parseFloat(document.hpmpForm.MP.value) || 0;
  
  // 计算全年Group LTD Plan值与月度值
  const annualLTDPlan = hp * 0.6;
  const monthlyLTDPlan = annualLTDPlan / 12;
  
  const cp = hp - annualLTDPlan;
  const ap = mp + cp;

  // 销毁旧图表实例，防止重复创建导致的性能问题
  if (window.myChart) {
    window.myChart.destroy();
  }
  
  // 初始化甜甜圈图表
  const ctx = document.getElementById('hpmpratio').getContext('2d');
  window.myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Income at Risk", "Group LTD Plan"],
      datasets: [{
        data: [ap, annualLTDPlan],
        backgroundColor: ["#D9221C", "#17DB4E"],
        hoverBackgroundColor: ["#D9221C", "#17DB4E"]
      }]
    },
    options: {
      cutoutPercentage: 65
    }
  });

  // 更新月度Group LTD Plan数值，保留两位小数符合金额显示规范
  document.getElementById("myText").textContent = monthlyLTDPlan.toFixed(2);
}

HTML代码 #

<html>
<head>
  <title>你的收入有多少面临风险？</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
  <style>
    input[type='text'] {
      font-size: 14px;
    }
  </style>
</head>
<body onload="hpmpGraph()" style="background-color:#F3FBFF;text-align:center">
  <h1 style="text-align:center">
    <font face="Verdana" color="#2D4C5E" size="9">你的收入有多少面临风险？</font><br />
  </h1>
  <form name="hpmpForm" method="post">
    薪资 :
    <input type="text" name="HP" value="180000">
    <br> 奖金与佣金 :
    <input type="text" name="MP" value="50000">
    <br>
    <button type="button" onclick="hpmpGraph();">计算</button>
    <h3>结果</h3>
    <canvas id="hpmpratio" height="85"></canvas>
  </form>
  <p>
    <font color="#17DB4E">月度Group LTD Plan: <span id="myText"></span></font>
  </p>
  <p>
    <font color="#D9221C">未受保护的月度收入:</font>
  </p>
</body>
</html>

额外优化说明 #

• 新增toFixed(2)确保数值保留两位小数，符合金额类数据的显示习惯。
• 添加图表实例销毁逻辑，避免多次点击计算时创建重复图表，提升页面性能。
• 对输入值做parseFloat转换并设置默认值0，防止用户输入非数字内容时出现计算错误。

内容的提问来源于stack exchange，提问作者Aqil Mohammed