如何对Chart.Js进行MMMYY排序并显示与月份匹配的值？-C#/.NET问题

How to sort MMMYY on Chart.Js and display the values that match the month?(如何对Chart.Js进行MMMYY排序并显示与月份匹配的值？)

本文介绍了如何对Chart.Js进行MMMYY排序并显示与月份匹配的值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这将是一段很长的时间，可能会令人困惑，但请原谅我。

我上一个问题是问如何从数据库中提取数据并动态地将其显示在图表中，感谢@Rena，我设法做到了这一点。这就是解决方案https://stackoverflow.com/a/67967555/15397944。我现在面临着一些挑战，我会把我的问题分成两部分，但首先我会展示我的模型设计。

型号

public class payable
{
    public int Id {get; set;}
    public decimal Amount {get; set;}
    public string Month {get; set;}
}

public class receivable
{
    public int Id {get; set;}
    public decimal Amount {get; set;}
    public string Month {get; set;}
}

public class payroll
{
    public int Id {get; set;}
    public decimal Amount {get; set;}
    public string Month {get; set;}
}

public class year
{
    public int Id {get; set;}
    public string Month {get; set;}
}

在数据库中，表在不同月份具有不同的值。

例如，如果我在Payable中调用Sum Amount，按月分组，然后选择Month DISTINCT，我会得到类似的结果

+-------+-------+
| JUL20 | $400  |
+-------+-------+
| SEP20 | $200  |
+-------+-------+
| OCT20 | $300  |
+-------+-------+
| DEC20 | $2000 |
+-------+-------+
| JAN21 | $1910 |
+-------+-------+
| FEB21 | $900  |
+-------+-------+
| MAR21 | $203  |
+-------+-------+
| APR21 | $194  |
+-------+-------+
| MAY21 | $1000 |
+-------+-------+

但如果我对应收账款执行相同的操作，我将得到类似的结果

+-------+-------+
| DEC20 | $1939 |
+-------+-------+
| JAN21 | $191  |
+-------+-------+
| FEB21 | $430  |
+-------+-------+
| MAR21 | $135  |
+-------+-------+
| APR21 | $945  |
+-------+-------+
| MAY21 | $1240 |
+-------+-------+

有些表中有一些2020年的旧月份，但我只希望我的图表显示那些2021年的月份，因此，我创建表年份的原因是，为了简单地将2021年1月到现在的月份，字符串显示为MMMYY(例如JAN21)。因此，这给我在显示图表时带来了一个问题，因为我不确定如何仅在可支付时才显示图表。月=年。月

这里是第1部分，在图表中，我只是想要这样的东西：其中费用=应付+工资总额。

但我不能这样做，这对我来说很好，我可以简单地调用所有3个，并将它们显示在3个不同的图表中，这对于我的项目解决方案也是可以的。

然而，这是第二部分。按照解决方案，当我将Month List的Handler方法更改为各自的表或Year表时，我会得到一堆混杂的月份(按字母顺序排列)，但这意味着其他两个表的排列将错误。

    public JsonResult OnGetRevenueData()
    {
     <!-- Code omitted to shorten -->
        var monthList = _context.year.Select(a => a.Month).Distinct().ToArray();
        return new JsonResult(new { revenue = countRevenue, expense = countExpense, month = monthList });
    }
}

例如，应收账款图表如下

因为数据是按照这个我之所以知道这一点，是因为我将代码更改为

    public JsonResult OnGetRevenueData()
    {
     <!-- Code omitted to shorten -->
        var monthList = _context.receivable.Select(a => a.Month).Distinct().ToArray();
        return new JsonResult(new { revenue = countRevenue, expense = countExpense, month = monthList });
    }
}

正如您所看到的，它只是跟在数组之后，所以即使对于月份标签跟在Year表之后的第一个图像，以及给我Jan-May的I OrderBy(Year.Id)，值也不会跟在后面，因为Jan将是应收账款的Feb，Feb将变成APR，依此类推。

所以我的问题是，有没有办法实现第1部分，其中应收、应付和工资表的月份与图表标签年表的月份相匹配。否则，是否可以在第2部分中执行此操作？

非常感谢您的帮助，并感谢您一直阅读到最后。

编辑：实施解决方案后，但数字与DataTables和数据库SQL不一致。

如您所见，对于DataTables，我对其进行了筛选以显示MAR21，并使用footerCallback将Amount列中的值相加，这给出了正确的总和

footerCallback代码

"footerCallback": function (row, data, start, end, display) 
{
   var api = this.api(), data;
   var numberRenderer = $.fn.dataTable.render.number(',', '.', 2, '$').display;
// Remove the formatting to get integer data for summation
   var intVal = function (i) 
{
   return typeof i === 'string' ? 
      i.replace(/[$,]/g, '') * 1 :
         typeof i === 'number' ?
            i : 0;
};

   Total = api
      .column(4, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);
   $(api.column(4).footer()).html(
      'Total : ' + numberRenderer(Total)
   );
}

通过使用SQL将其与数据库本身进行比较，确认它是正确的

然而，在实现该图之后的解决方案上，我得到了以下结果图中显示的数字为757210.83。

您也可以从屏幕截图中看到，May列没有费用，但实际上在数据库中有值。

进一步检查，值757210.83，属于5月。因此，这些值的总和是正确的，但显示错误。5月号显示在3月栏上，3月号显示在5月栏上。其他数字也是如此-1月份的数字显示在APR栏上，2月份的数字显示在1月份的栏上，APR的数字显示在2月栏上。所以，我很困惑为什么它是这样的，它也没有按字母顺序排序，因为APR编号不在JAN列中。

但这仍然不能解释缺少的费用列，因为它们都有费用(工资单和/或应付)。

推荐答案

您可以按如下方式更改您的LINQ：

public JsonResult OnGetRevenueData()
{
    var year = _context.year.Select(a => a.Month).ToList();
    var Revenue = (from t in _context.Revenue
                    where year.Contains(t.Month)
                    group t by new {  Month = t.Month} into g                              
                    select new 
                    {
                        Amount = g.Sum(a => a.Amount),
                        Month = g.Key.Month
                    }).ToList();
    var countRevenue = Revenue.OrderBy(a => DateTime.ParseExact(a.Month, "MMMyy", CultureInfo.InvariantCulture).Month)
                                .Select(a=>a.Amount)
                                .ToList();
    var countPayroll = (from t in _context.payroll
                        where year.Contains(t.Month)
                        group t by new { Month = t.Month } into g
                        select new {
                            Amount = g.Sum(a => a.Amount),
                            Month = g.Key.Month
                        }).ToList();
    var countPayable = (from t in _context.payable
                        where year.Contains(t.Month)
                        group t by new { Month = t.Month } into g
                        select new
                        {
                            Amount = g.Sum(a => a.Amount),
                            Month = g.Key.Month
                        }).ToList();
      //change here......
    var leftOuterJoin = from a in countPayable
                        join b in countPayroll on a.Month equals b.Month into temp
                        from count in temp.DefaultIfEmpty()
                        select new
                        {
                            Month = a.Month,
                            Amount = a.Amount
                        };
    var rightOuterJoin =
        from b in countPayroll
        join a in countPayable on b.Month equals a.Month into temp
        from count in temp.DefaultIfEmpty()
        select new
        {
            Month = b.Month,
            Amount = b.Amount
        };
    var fullOuterJoin = leftOuterJoin.Union(rightOuterJoin);
    var Expense = (from t in fullOuterJoin
                    group t by new
                    {
                        Month = t.Month
                    } into g
                    select new
                    {
                        Amount = g.Sum(a => a.Amount),
                        Month = g.Key.Month
                    }
                    ).ToList();
    var countExpense = Expense.OrderBy(a => DateTime.ParseExact(a.Month, "MMMyy", CultureInfo.InvariantCulture).Month)
                                .Select(a => a.Amount)
                                .ToList();

    var yearList = ((from y in _context.year
                        select y.Month
                        )
                    .AsEnumerable()
                    .OrderBy(s => DateTime.ParseExact(s, "MMMyy", CultureInfo.InvariantCulture).Month)
                    ).ToArray();
    return new JsonResult(new { revenue = countRevenue, expense = countExpense, month = yearList });
}

结果：

条形图：

付款表：

工资总额表：

收入表：

年表：

这篇关于如何对Chart.Js进行MMMYY排序并显示与月份匹配的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！