柱状图值插入异常：选择大学后教学数据无法填充排查

核心问题分析 #

你的图表无法获取有效数据，主要有两个关键原因：

• 下拉选择后的数据更新逻辑缺失：item1()、item2()、item3()函数没有正确将选中大学的教学得分写入对应<td>元素
• 图表仅初始化一次：页面加载时读取<td>的初始值（N/A），后续<td>内容更新后，图表不会自动同步数据

具体修复步骤 #

1. 完善下拉选择的回调函数 #

首先必须确保item1、item2、item3函数能正确更新对应<td>的内容，并触发图表更新。示例实现如下：

// 假设你有一个存储大学数据的数组，格式示例：
const universityData = [
  { id: 1, name: "大学A", teaching: 85 },
  { id: 2, name: "大学B", teaching: 92 },
  { id: 3, name: "大学C", teaching: 78 }
];

// 根据ID获取教学得分的工具函数
function getTeachingScore(id) {
  const uni = universityData.find(u => u.id == id);
  return uni ? uni.teaching : 'N/A';
}

// 下拉1的回调函数
function item1(value) {
  const score = getTeachingScore(value);
  document.getElementById("teaching1").innerHTML = score;
  updateTeachingChart(); // 更新图表
}

// 下拉2的回调函数
function item2(value) {
  const score = getTeachingScore(value);
  document.getElementById("teaching2").innerHTML = score;
  updateTeachingChart(); // 更新图表
}

// 下拉3的回调函数
function item3(value) {
  const score = getTeachingScore(value);
  document.getElementById("teaching3").innerHTML = score;
  updateTeachingChart(); // 更新图表
}

2. 修改图表初始化逻辑，支持动态更新 #

将图表实例保存为全局变量，新增更新函数，确保每次<td>内容变化后图表能同步刷新：

// 全局保存图表实例
let teachingChart;

// 初始化图表
function initTeachingChart() {
  const ctxTeaching = document.getElementById('chartTeaching').getContext('2d');
  teachingChart = new Chart(ctxTeaching, {
    type: 'bar',
    data: {
      labels: ['University 1', 'University 2', 'University 3'],
      datasets: [{
        label: 'Teaching',
        data: [
          parseFloat(document.getElementById("teaching1").innerHTML) || 0,
          parseFloat(document.getElementById("teaching2").innerHTML) || 0,
          parseFloat(document.getElementById("teaching3").innerHTML) || 0
        ],
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}

// 更新图表数据的函数
function updateTeachingChart() {
  // 读取DOM中的得分，并转为数字（避免字符串导致图表异常）
  teachingChart.data.datasets[0].data = [
    parseFloat(document.getElementById("teaching1").innerHTML) || 0,
    parseFloat(document.getElementById("teaching2").innerHTML) || 0,
    parseFloat(document.getElementById("teaching3").innerHTML) || 0
  ];
  teachingChart.update(); // 触发图表刷新
}

// 页面加载完成后初始化图表
window.addEventListener('load', initTeachingChart);

3. 关键细节说明 #

• 字符串转数字：从DOM中读取的内容是字符串，必须转为数字后再传给Chart.js，否则会被识别为无效数据
• 图表实例保存：只有保存了图表实例，才能调用update()方法实现动态刷新，而不是每次都重新创建图表

内容的提问来源于stack exchange，提问作者Bagas Catur s