Chart.js图表数据更新问题：数组包裹对象属性的访问与赋值

问题1：正确访问Chart.js数据集的方式 #

你遇到的datasets未定义问题，核心原因有两个：

• 误用了Chart构造函数而非自己创建的图表实例：操作图表数据必须使用你声明的myChart实例，而非全局Chart构造函数。
• datasets是数组类型（支持多数据集），不是单个对象，必须通过索引（如[0]）访问具体数据集后，再获取data属性。

正确的访问路径：

myChart.data.datasets[0].data

问题2：用变量赋值替换图表data数组完全可行 #

你的代码无效是因为存在几个语法和类型错误，而非变量赋值不可行：

1. 变量名拼写错误：iinputSecureLoads多了一个i，应改为inputSecureLoads，这个错误会中断代码执行，导致后续赋值逻辑无法运行。
2. 数据类型不匹配：jQuery的val()返回字符串类型，Chart.js需要数字类型的数据集，必须将输入值转换为数字。
3. 边界检查代码冗余：可封装为函数简化逻辑，不影响功能但提升代码可读性。

修正后的完整代码 #

<html>
<head> 
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  
  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="crossorigin="anonymous"></script>
  <style>
    html,
    body {
      margin: 30px;
    }
    
    #chart {
      height: 400px;
      width: 400px;
    }

    .container{
        width:600px; 
        height:600px;
    }

  </style>
 
</head> 
<body> 

  <form>
      <label for="inputSafeVans">Safe Vans:</label><br>
      <input type="number" id="inputSafeVans" name="inputSafeVans" value="60"><br><br>

      <label for="inputDriverLicences">Driver Licences:</label><br>
      <input type="number" id="inputDriverLicences" name="inputDriverLicences" value="100"><br><br>

      <label for="inputFitnessToDrive">Fitness To Drive:</label><br>
      <input type="number" id="inputFitnessToDrive" name="inputFitnessToDrive" value="30"><br><br>

      <label for="inputDriveCompetence">Driver Competence:</label><br>
      <input type="number" id="inputDriveCompetence" name="inputDriveCompetence" value="40"><br><br>
  
      <label for="inputLoadLimits">Load Limits:</label><br>
      <input type="number" id="inputLoadLimits" name="inputLoadLimits" value="50"><br><br>

      <label for="inputSecureLoads">Secure Loads:</label><br>
      <input type="number" id="inputSecureLoads" name="inputSecureLoads" value="60"><br><br>

      <button type="button" value="Submit" onclick="getData()">Submit</button>
  </form> 
  
    <div class="container">
      <canvas id="myChart" width="400" height="400"></canvas> 
    </div>
    <script>

      const ctx = document.getElementById('myChart');
      var myChart = new Chart(ctx, {
        type: 'polarArea',
        data: {
          labels: [
              '1. Safe Vans',
              '2. Driver Licences',
              '3. Fitness to Drive',
              '4. Driver Competence',
              '5. Load Limits',
              '6. Secure Loads'
            ],
          datasets: [{
              label: 'Score',
              data: [45, 20, 50, 65, 80, 100],
              backgroundColor: '#76b82a',
          }]
        },
        options: {
          plugins: {
            legend: {
              display: false
            }
          },
          elements: {
            arc: {
              circular: false
            }
          },
          responsive: true,
          scales: {
            r: {
              startAngle: -30,
              min: 0,
              max: 100,
              grid: {
                display: true,
                circular: false,
                color: '#173040',
                lineWidth: 3,
                z: 1
              },
              angleLines: {
                display: true,
                color: '#173040',
                lineWidth: 3
              },
              ticks: {
                display: false,
                stepSize: 100
              },
              border: {
                display: true,
                color: '#000',
                width: 2,
              },
              pointLabels: {
                display: true,
                centerPointLabels: true,
                color: '#173040',
                font: {
                  size: 18,
                  weight: 700
                }
              },
              title: {
                align: 'center'
              },
            }
          },
        }
      });

      // 封装边界检查与类型转换函数
      function clampValue(value) {
        const num = Number(value);
        return Math.max(0, Math.min(100, num));
      }

      function getData(){
        // 获取并处理输入值
        var inputSafeVans = clampValue($("#inputSafeVans").val());
        var inputDriverLicences = clampValue($("#inputDriverLicences").val());
        var inputFitnessToDrive = clampValue($("#inputFitnessToDrive").val());
        var inputDriverCompetence = clampValue($("#inputDriveCompetence").val());
        var inputLoadLimits = clampValue($("#inputLoadLimits").val());
        var inputSecureLoads = clampValue($("#inputSecureLoads").val());

        var captureInput = [inputSafeVans, inputDriverLicences, inputFitnessToDrive, inputDriverCompetence, inputLoadLimits, inputSecureLoads];

        // 更新数据集并触发图表重绘
        myChart.data.datasets[0].data = captureInput;
        myChart.update();
      }
  
    </script>  
</body>
</html>

关键修改点 #

1. 修复变量名拼写错误：iinputSecureLoads → inputSecureLoads
2. 添加clampValue函数，统一处理输入值的类型转换和0-100边界限制
3. 确保输入值转为数字类型，匹配Chart.js的数据集要求
4. 保留正确的数据集访问路径，赋值后调用myChart.update()触发图表更新

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