如何在 Chart.Js 上对 MMMYY 进行排序并显示与月份匹配的值？
How to sort MMMYY on Chart.Js and display the values that match the month?
这会很长，可能会让人困惑，但请耐心等待。
我之前的问题是问如何从数据库中提取数据并将其动态显示在图表中，我已经设法做到了@Rena 的礼貌。这就是解决方案 。
我目前面临一些挑战，我会将我的问题分为两部分，但首先我将展示我的模型设计。
型号
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;}
}
在数据库中，table在不同的月份有不同的值。
例如，如果我在 payable 中调用总金额，按月分组并且 select 月不同，我会得到类似
的结果
+-------+-------+
| JUL20 | 0 |
+-------+-------+
| SEP20 | 0 |
+-------+-------+
| OCT20 | 0 |
+-------+-------+
| DEC20 | 00 |
+-------+-------+
| JAN21 | 10 |
+-------+-------+
| FEB21 | 0 |
+-------+-------+
| MAR21 | 3 |
+-------+-------+
| APR21 | 4 |
+-------+-------+
| MAY21 | 00 |
+-------+-------+
但是如果我对应收款做同样的事情，我会得到类似
的东西
+-------+-------+
| DEC20 | 39 |
+-------+-------+
| JAN21 | 1 |
+-------+-------+
| FEB21 | 0 |
+-------+-------+
| MAR21 | 5 |
+-------+-------+
| APR21 | 5 |
+-------+-------+
| MAY21 | 40 |
+-------+-------+
在某些 table 中有一些从 2020 年开始的旧月份，但我只想让我的图表显示 2021 年的那些月份，因此，我创建 table 年的原因只是让 Jan - 2021 年的当前月份，字符串显示为 MMMYY（例如 JAN21）。因此，这在显示图表时给我带来了一个问题，因为我不确定如何仅在 payable.month = year.month
时显示
所以这是第 1 部分，在图表中我只是喜欢这样的东西：
其中费用 = 应付款 + 工资单。
但我无法做到这对我来说很好，我可以简单地调用所有 3 个并将它们显示在 3 个不同的图表中，这也适用于我的项目解决方案。
但是，这是第 2 部分。按照解决方案，当我将月份列表的处理程序方法更改为相应的 table 或年份 table 时，我会得到一堆混乱个月（按字母顺序排列）但这意味着其他两个 table 将被错误地排列。
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 });
}
}
如您所见，它只是跟随数组，所以即使对于月份标签跟随年份 table 的第一张图像，我 OrderBy(year.Id) 也会给出我的 JAN-MAY 正确，这些值不会遵循，因为 JAN 将是可收款的 FEB，然后 FEB 将变为 APR，依此类推。
所以我的问题是，有没有办法实现第 1 部分，其中应收账款、应付账款和工资单的月份 table 与年份 table 月份相匹配，这是图表的标签。否则，是否可以改为在第 2 部分进行？
非常感谢任何帮助，感谢您阅读到最后。
编辑：实施解决方案后，数字与数据表和数据库不一致 SQL。
如您所见，对于 DataTables，我对其进行过滤以显示 MAR21，并使用 footerCallback 对 Amount 列中的值求和，这给出了正确的总和
页脚回调代码
"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 属于 May。
所以这些值正确求和但显示错误。 MAR 列显示 MAY 数字，MAY 列显示 MAR 数字。其他的 - JAN 数字显示在 APR 列上，FEB 数字显示在 JAN 列上，APR 数字显示在 FEB 列上。所以，我很困惑为什么会这样，它也没有按字母顺序排序，因为 APR 数字不在 JAN 列中。
但这仍然不能解释缺少的费用栏，因为它们都有费用（应付工资 and/or）。
您可以像下面这样更改您的 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 });
}
结果：
条形图：
应付 table:
工资table:
收入table：
年 table:
这会很长，可能会让人困惑，但请耐心等待。
我之前的问题是问如何从数据库中提取数据并将其动态显示在图表中，我已经设法做到了@Rena 的礼貌。这就是解决方案
型号
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;}
}
在数据库中，table在不同的月份有不同的值。
例如，如果我在 payable 中调用总金额，按月分组并且 select 月不同，我会得到类似
的结果+-------+-------+
| JUL20 | 0 |
+-------+-------+
| SEP20 | 0 |
+-------+-------+
| OCT20 | 0 |
+-------+-------+
| DEC20 | 00 |
+-------+-------+
| JAN21 | 10 |
+-------+-------+
| FEB21 | 0 |
+-------+-------+
| MAR21 | 3 |
+-------+-------+
| APR21 | 4 |
+-------+-------+
| MAY21 | 00 |
+-------+-------+
但是如果我对应收款做同样的事情，我会得到类似
的东西+-------+-------+
| DEC20 | 39 |
+-------+-------+
| JAN21 | 1 |
+-------+-------+
| FEB21 | 0 |
+-------+-------+
| MAR21 | 5 |
+-------+-------+
| APR21 | 5 |
+-------+-------+
| MAY21 | 40 |
+-------+-------+
在某些 table 中有一些从 2020 年开始的旧月份，但我只想让我的图表显示 2021 年的那些月份，因此，我创建 table 年的原因只是让 Jan - 2021 年的当前月份，字符串显示为 MMMYY（例如 JAN21）。因此，这在显示图表时给我带来了一个问题，因为我不确定如何仅在 payable.month = year.month
时显示所以这是第 1 部分，在图表中我只是喜欢这样的东西：
但我无法做到这对我来说很好，我可以简单地调用所有 3 个并将它们显示在 3 个不同的图表中，这也适用于我的项目解决方案。
但是，这是第 2 部分。按照解决方案，当我将月份列表的处理程序方法更改为相应的 table 或年份 table 时，我会得到一堆混乱个月（按字母顺序排列）但这意味着其他两个 table 将被错误地排列。
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 });
}
}
如您所见，它只是跟随数组，所以即使对于月份标签跟随年份 table 的第一张图像，我 OrderBy(year.Id) 也会给出我的 JAN-MAY 正确，这些值不会遵循，因为 JAN 将是可收款的 FEB，然后 FEB 将变为 APR，依此类推。
所以我的问题是，有没有办法实现第 1 部分，其中应收账款、应付账款和工资单的月份 table 与年份 table 月份相匹配，这是图表的标签。否则，是否可以改为在第 2 部分进行？
非常感谢任何帮助，感谢您阅读到最后。
编辑：实施解决方案后，数字与数据表和数据库不一致 SQL。
如您所见，对于 DataTables，我对其进行过滤以显示 MAR21，并使用 footerCallback 对 Amount 列中的值求和，这给出了正确的总和
页脚回调代码
"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与数据库本身进行比较，确认这是正确的
然而，在图实现后的解决方案上，这就是我得到的
从屏幕截图中也可以看出，MAY 列没有费用，但实际上在数据库中有值。
进一步检查，值 757210.83 属于 May。 所以这些值正确求和但显示错误。 MAR 列显示 MAY 数字，MAY 列显示 MAR 数字。其他的 - JAN 数字显示在 APR 列上，FEB 数字显示在 JAN 列上，APR 数字显示在 FEB 列上。所以，我很困惑为什么会这样，它也没有按字母顺序排序，因为 APR 数字不在 JAN 列中。
但这仍然不能解释缺少的费用栏，因为它们都有费用（应付工资 and/or）。
您可以像下面这样更改您的 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 });
}
结果：
条形图：
应付 table:
工资table:
收入table：
年 table: