Hourly, Daily, Monthly Helper+Model 方法

Question

我有一个 Web 门户，将 API 解析为一个 Web URL，它通过 JSON 传递。

此数据是使用 Charts 配置的，我们目前使用的是 flot.js

hourlyData 的代码已经存在并插入到 json 图表中。

我正在尝试为每月和每年重新创建此内容。

hourlyData 的当前代码如下所示：

  List<dynamic> hourlyData = new List<dynamic>();
            DateTime hourIterator = StartDate.Value;
            while (hourIterator.Hour <= ddvm.CurrentHour)
            {
                if (ddvm.HourlyPaymentTotal != null && ddvm.HourlyPaymentTotal.Count() > 0 )
                {
                    HourlyPaymentTotalModel hour = ddvm.HourlyPaymentTotal.FirstOrDefault(hpt => hpt.DateTimeStamp == hourIterator);
                    if (hour == null) { hour = new HourlyPaymentTotalModel() { DateTimeStamp = hourIterator }; };
                    hourlyData.Add(new List<dynamic> {hourIterator.Hour,
                                                        hour.Amount, 
                                                        new { tooltip = String.Format("{0} : {1}", hour.Count, hour.Amount.ToString("C")) } });
                }
                hourIterator = hourIterator.AddHours(1);
            }

            ddvm.GraphData.LineChart_HourlyTotal.Add(new
            {
                data = hourlyData,
                color = "#A1345E",
                label = "Total Amount Paid"
            });

如何将hourlyData 重新创建为monthlyData 和yearlyData？

编辑：

    public class HourlyPaymentTotalModel : ViewModelBase
    {
        public int Hour 
        {
            get { return DateTimeStamp.Hour; }
            set { DateTimeStamp  = new DateTime(1, 1, 1, value, 0, 0); } 
        }
        public string FormattedHour
        {
            get { return DateTimeStamp.ToShortTimeString().Replace(":00 ", ""); }
            set { DateTimeStamp = DateTime.Parse(value); }
        }
        public DateTime DateTimeStamp { get; set; }
        public decimal Amount { get; set; }
        public int Count { get; set; }
    }
}

这是来自 API 解决方案：

public IQueryable<PaymentSummary> GetHourlyPaymentTotals(DateTime startDate, DateTime endDate, string PaymentProcessor = null, string merchantID=null)
        {
            transactionRepository = GetTransactionRepository(PaymentProcessor);
            IQueryable<IPayment> allPayments = transactionRepository.GetAllPayments(startDate, endDate, merchantID);
            var retVal = from ap in allPayments
                         group ap by new
                         {
                             PaymentDateYear = ap.PaymentDate.Value.Year,
                             PaymentDateMonth = ap.PaymentDate.Value.Month,
                             PaymentDateDay = ap.PaymentDate.Value.Day,
                             PaymentDateHour = ap.PaymentDate.Value.Hour
                         }
                             into grp_ap
                             select (new
                             {
                                 PaymentDateString = grp_ap.Key.PaymentDateMonth.ToString() + "/" + grp_ap.Key.PaymentDateDay.ToString() + "/" + grp_ap.Key.PaymentDateYear.ToString() + " " + grp_ap.Key.PaymentDateHour + ":00",
                                 Amount = grp_ap.Sum(grp => grp.Amount),
                                 Count = grp_ap.Count()
                             });
            return (IQueryable<PaymentSummary>)retVal.ToList().Select(p => new PaymentSummary()
            {
                PaymentDate = (DateTime?)DateTime.Parse(p.PaymentDateString),
                Amount = p.Amount,
                Count = p.Count
            }).ToList().AsQueryable();
        }

---

更新：我根据 Mairaj Ahmad 提出的解决方案创建了更多模型。 这是使用 dailyData 模型。

我仍然不确定为什么<canvas> 在我的图表字段下显示为空白。 这可能是对指定图表的数据或 flot.js 选项有错误。

var  area_chart_payment_by_day_options = {
        series: {
            lines: {
                show: true,
                fill: .5
            },
            points: { show: true }
        },
        grid: {
            borderWidth: 0,
            hoverable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: "%x : $ %y"
        },
        xaxis: {
            //mode: "categories",
            tickDecimals: 0,
            min:1,
            max:31
        },
        yaxis: {
            tickFormatter: function (y) { return "$ " + y + " "; },
            tickDecimals:0
        }
    }

数据函数

 $(function () {
            var data = [];
            @Html.Raw("data = " + Json.Encode(Model.GraphData.LineChart_DailyTotal) + ";");   //TODO: LineChart_Daily
            $.plot($("#area_chart_payment_by_day"), area_chart_payment_by_day, 

更新功能

$.plot($("#area_chart_payment_by_day"), area_chart_payment_by_day, area_chart_payment_by_day_options);

Answer 1

您可以使用相同的逻辑创建每日、每月和每年的数据。您只需将 Hour 替换为 Day、Month 或 Year。

List<dynamic> dailyData = new List<dynamic>();
        DateTime dayIterator = StartDate.Value;
        while (dayIterator.Hour <= ddvm.CurrentDay)
        {
            if (ddvm.DailyPaymentTotal != null && ddvm.DailyPaymentTotal.Count() > 0 )
            {
                DailyPaymentTotalModel day = ddvm.DailyPaymentTotal.FirstOrDefault(hpt => hpt.DateTimeStamp == dayIterator);
                if (day == null) { hour = new DailyPaymentTotalModel() { DateTimeStamp = dayIterator }; };
                dailyData.Add(new List<dynamic> {dayIterator.Day,
                                                    day.Amount, 
                                                    new { tooltip = String.Format("{0} : {1}", day.Count, day.Amount.ToString("C")) } });
            }
            dayIterator = dayIterator.AddDays(1);
        }

        ddvm.GraphData.LineChart_DailyTotal.Add(new
        {
            data = dailyData,
            color = "#A1345E",
            label = "Total Amount Paid"
        });

这将是你的 DailyModel。

public class DailyPaymentTotalModel : ViewModelBase
{
    public int Day 
    {
        get { return DateTimeStamp.Day; }
        set { DateTimeStamp  = new DateTime(1, 1, value, 0, 0, 0); } 
    }

    public DateTime DateTimeStamp { get; set; }
    public decimal Amount { get; set; }
    public int Count { get; set; }
}

}

您的数据获取逻辑看起来在此函数中，您需要对其进行相应更改以使其适用于日、月、年

transactionRepository.GetAllPayments(startDate, endDate, merchantID);