Question

我有一个门户网站，解析API，到一个网址，在那里它通过JSON。

此数据是使用图表配置的，我们目前正在使用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和annualData？

编辑：

    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

您可以使用相同的逻辑创建每日，每月和每年的数据。您只需将日期，月份或年份替换为小时。

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);

每小时，每日，每月助手+模型方法

1 个答案: