.NET6中CSHTML页面Morris.Bar图表数据更新失败求助

排查步骤与修复方案 #

1. 确认AJAX数据返回时机与格式 #

虽然你提到getFVolumeOverviewData和getCVolumeOverviewData运行正常，但要确保调用setData时，数据已完全返回且格式符合要求：

• 数据必须是包含x和y键的对象数组，示例格式：

  [{"x": "Jan", "y": 100}, {"x": "Feb", "y": 200}]
  

• 如果getXXX函数是异步AJAX逻辑，建议改成Promise+async/await确保数据就绪：

  $('#drpTeamOrInd').change(async function () {
      const selectedVal = $(this).val();
      const fData = await getFVolumeOverviewData(selectedVal);
      const cData = await getCVolumeOverviewData(selectedVal);
      morBarF.setData(fData);
      morBarC.setData(cData);
  });
  

  同步修改数据获取函数返回Promise：

  function getFVolumeOverviewData(val) {
      return new Promise((resolve) => {
          $.ajax({
              url: '/YourController/GetFData',
              data: { type: val },
              type: 'GET',
              success: (data) => resolve(data)
          });
      });
  }
  

2. 处理隐藏容器的重绘问题 #

当图表容器被hide()隐藏时，调用setData可能无法触发重绘。可先确保容器可见再更新，或强制触发重绘：

$('#drpTeamOrInd').change(function () {
    const selectedVal = $(this).val();
    const fData = getFVolumeOverviewData(selectedVal);
    const cData = getCVolumeOverviewData(selectedVal);

    // 更新当前可见的图表并强制重绘
    if ($('#divChartVolumeOverviewF').is(':visible')) {
        morBarF.setData(fData);
        morBarF.redraw();
    }
    if ($('#divChartVolumeOverviewC').is(':visible')) {
        morBarC.setData(cData);
        morBarC.redraw();
    }
    // 同步更新隐藏图表的数据，切换显示时直接展示最新内容
    if ($('#divChartVolumeOverviewF').is(':hidden')) {
        morBarF.setData(fData);
    }
    if ($('#divChartVolumeOverviewC').is(':hidden')) {
        morBarC.setData(cData);
    }
});

3. 验证全局图表实例的有效性 #

确保morBarF和morBarC全局变量未被覆盖或丢失实例：

• 在initializeCharts执行后打印实例确认：

  console.log('morBarF instance:', morBarF);
  console.log('morBarC instance:', morBarC);
  

• 若实例为undefined，检查是否存在变量作用域问题，比如将变量声明放在最外层，避免其他函数中重新声明同名变量。

4. 旧版Morris兼容处理 #

你使用的依赖raphael-2.1.0的旧版Morris可能存在setData bug，可尝试销毁旧实例后重新初始化：

$('#drpTeamOrInd').change(function () {
    const selectedVal = $(this).val();
    // 销毁旧实例
    if (morBarF) morBarF.destroy();
    if (morBarC) morBarC.destroy();
    // 重新初始化图表
    morBarF = new Morris.Bar({
        element: 'divChartVolumeOverviewAll',
        data: getFVolumeOverviewData(selectedVal),
        xkey: 'x',
        ykeys: ['y'],
        labels: ['DV']
    });
    morBarC = new Morris.Bar({
        element: 'divChartVolumeOverviewPart',
        data: getCVolumeOverviewData(selectedVal),
        xkey: 'x',
        ykeys: ['y'],
        labels: ['DV']
    });
    // 恢复容器显示状态
    const volTypeVal = $('#drpVolOverviewType').val();
    if (volTypeVal == 1) {
        $('#divChartVolumeOverviewF').show();
        $('#divChartVolumeOverviewC').hide();
    } else {
        $('#divChartVolumeOverviewC').show();
        $('#divChartVolumeOverviewF').hide();
    }
});

额外检查点 #

• 打开浏览器控制台，查看是否存在JavaScript错误，比如setData未定义、数据格式不匹配等。
• 确认AJAX返回的数据结构与初始化时完全一致，避免字段名拼写错误（如X/Y大小写错误）。

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