如何更新Morris.Bar图表中的数据

Question

这是关于 .net6 应用程序中 cshtml 页面中的 morris.bar 实现的问题。

我有一个 morris.bar 图表，在页面加载时会加载两个数据集。可以使用下拉菜单切换图表数据 (#drpVolOverviewType)。

我添加了第二个下拉菜单（#drpTeamOrInd）。当切换这个新的下拉列表时，我希望根据控制器中定义的逻辑从数据库更新图表中的两个数据集。数据部分工作正常。我的问题是 morris.bar 没有更新。

这是我的 morris.bar 的版本： js/MorrisPlugin/raphael-2.1.0.js

我尝试用此方法刷新它，但没有成功：

$('#drpTeamOrInd').change(function () {
    // Call the function with synchronous AJAX and update the MorrisBar chart
    morBarF.setData(getFVolumeOverviewData($('#drpTeamOrInd').val()));
    morBarC.setData(getCVolumeOverviewData($('#drpTeamOrInd').val()));
});

getFVolumeOverviewData 和 getCVolumeOverviewData 是在页面加载时获取数据的函数，并且它们工作正常。

这是相关代码：

  var morBarF;
   var morBarC;

   // Function to initialize MorrisBar charts
   function initializeCharts() {
       // All volume overview
       morBarF = new Morris.Bar({
           // ID of the element in which to draw the chart.
           element: 'divChartVolumeOverviewAll',
           data: getFVolumeOverviewData($('#drpTeamOrInd').val()), // Initial data
           xkey: 'x',
           ykeys: ['y'],
           labels: ['DV']
       });

       // Part volume overview
       morBarC = new Morris.Bar({
           // ID of the element in which to draw the chart.
           element: 'divChartVolumeOverviewPart',
           data: getCVolumeOverviewData($('#drpTeamOrInd').val()), // Initial data
           xkey: 'x',
           ykeys: ['y'],
           labels: ['DV']
       });
       $('#divChartVolumeOverviewPart').hide();
       $('#drpVolOverviewType').trigger('change');
   }

   // Call the function to initialize charts
   initializeCharts();

     //Volume overview instrument type dropdown change event
     $('#drpVolOverviewType').change(function () {
            if ($('#drpVolOverviewType').val() == 1) {
                $('#spnMonthToDate').text(fTotalTrade);
                $('#divChartVolumeOverviewF').show();
                $('#divChartVolumeOverviewC').hide();
            } else if ($('#drpVolOverviewType').val() == 2) {
                $('#spnMonthToDate').text(cTotalTrade);
                $('#divChartVolumeOverviewC').show();
                $('#divChartVolumeOverviewF').hide();
            }
        });

   $('#drpTeamOrInd').change(function () {
       // Call the function with synchronous AJAX and update the MorrisBar chart
       morBarF.setData(getFVolumeOverviewData($('#drpTeamOrInd').val()));
       morBarC.setData(getCVolumeOverviewData($('#drpTeamOrInd').val()));
    });

感谢您对此的帮助。 谢谢

Answer 1

根据讨论中 3limin4t0r 的建议，解决方案是首先将 getFVolumeOverviewData($('#drpTeamOrInd').val()) 返回的值分配给变量，然后将其传递给 morris.bar。

我不知道在 JS 中不可能将函数作为另一个方法中的参数执行。