Question

我在使用Kendo MVC条形图/柱形图时遇到问题。

在categoryaxis中，我输入了日期值。如果我选择＆＃34; .BaseUnit（ChartAxisBaseUnit.Days）＆＃34;在CategoryAxis中的选项，我得到月份的所有日期值，包括没有值的日期。

有没有办法隐藏没有价值的日子？

Chart

这就是我所拥有的;

<%= Html.Kendo().Chart<DaFyDaC.Models.KPIs.HistoryElecConsumpView>()
    .Name("kilovat")
    .DataSource(dataSource => dataSource
        .Sort(sort => sort.Add(model => model.HEC_DATE).Ascending())
    )
    .Series(series =>
    {
        series.Column(model => model.HEC_POWER).Name("Power (kVA)");
        series.Column(model => model.HEC_CONSUMPTION).Name("Elec. Consump. (kVH)");
    })
    .CategoryAxis(axis => axis
        .Date()
        .Labels(l=>l.Template("#= kendo.toString(value, 'dd/MM/yyyy')#"))
        .Title("Month")
        .Categories(model => model.HEC_DATE)
        .Color("black")
        .BaseUnit(ChartAxisBaseUnit.Days)
        .AxisCrossingValue(0,40)
        .Labels(labels => labels.Rotation(-50))
        .MajorGridLines(lines => lines.Visible(true))
    )
   .ValueAxis(axis => axis.Numeric("kVA")
       .Title("Power (kVA)")
        .Labels(labels => labels
            .Format("{0}")
        )
    )
%>

这是我的JSON数据：

0: {DATA_CENTER: "CI1", CUSTOMER: "myCustomer", HEC_DATE: "02/02/2015", HEC_YEAR: 2015,…}
1: {DATA_CENTER: "CI1", CUSTOMER: "myCustomer", HEC_DATE: "02/03/2015", HEC_YEAR: 2015,…}
2: {DATA_CENTER: "CI1", CUSTOMER: "myCustomer", HEC_DATE: "01/04/2015", HEC_YEAR: 2015,…}
3: {DATA_CENTER: "CI1", CUSTOMER: "myCustomer", HEC_DATE: "30/04/2015", HEC_YEAR: 2015,…}

Answer 1

我找到了解决方案。我没有在CategoryAxis（）中使用Date（）方法。我认为那些日期值只是＆＃34;字符串＆＃34;值。我只是格式化日期并显示它。要排序日期值（升序），我在服务器端处理它。

//服务器端

＆＃13;

public ActionResult ElecConsumPerCustomer_Read([DataSourceRequest] DataSourceRequest request, string customer, string datacenter, string year) {
  List < HistoryElecConsumpView > list = HistoryEcRepository.Instance.getHECDataPerCustomer(customer, datacenter);

  return Json(list.Where(ec => ec.HEC_DATE.Year.ToString() == year).OrderBy(ec => ec.HEC_DATE).ThenBy(ec => ec.EQUIPMENT).ToList(), JsonRequestBehavior.AllowGet);
}

＆＃13;

//客户端

＆＃13;

<%= Html.Kendo().Chart < DaFyDaC.Models.KPIs.HistoryElecConsumpView > ()
  .Name("kilovat").Title(title => {
    title.Text("KiloVat Data").Font("16px Open Sans, sans-serif").Color("black");
    title.Position(ChartTitlePosition.Bottom);
  })
  .Legend(legend => legend.Position(ChartLegendPosition.Right).Font("Open Sans, sans-serif"))
  .DataSource(dataSource => dataSource.Sort(sort => sort.Add(model => model.HEC_DATE).Ascending()))
  .Series(series => {
    series.Column(model => model.HEC_POWER).Name("Power (kVA)").Color("#17c809").Axis("kVA").Labels(l => {
      l.Visible(true);
      l.Background("transparent");
    }); //.CategoryField("date");
    series.Column(model => model.HEC_CONSUMPTION).Name("Elec. Consump. (kVH)").Color("#147c0c").Axis("kVH").Labels(l => {
      l.Visible(true);
      l.Background("transparent");
    }); //.CategoryField("date");
  })
  .ChartArea(chartarea => {
    chartarea.Background("#F3F5F7");
  })
  .CategoryAxis(axis => axis
    .Labels(l => l.Template("#= kendo.toString(toDate(value), 'd/M/yy') #  (#= dataItem.EQUIPMENT #)  ").Font("Open Sans, sans-serif"))
    .Title("Month")
    .Categories(model => model.HEC_DATE)
    .Color("black")
    .AxisCrossingValue(0, 40)
    .Labels(labels => labels.Font("Open Sans, sans-serif").Rotation(-25))
    .MajorGridLines(lines => lines.Visible(true))
  )
  .Theme("metro")
  .ValueAxis(axis => axis.Numeric("kVA").Title(t => t.Text("Power (kVA)").Font("16px Open Sans, sans-serif")).Labels(labels => labels.Font("Open Sans, sans-serif").Format("{0}")).Color("#17c809"))
  .ValueAxis(axis => axis.Numeric("kVH").Title(t => t.Text("Elec. Consump. (kVH)").Font("16px Open Sans, sans-serif")).Labels(labels => labels.Font("Open Sans, sans-serif").Format("{0}")).Color("#147c0c"))
  .Pdf(pdf => {
    pdf.Date(DateTime.Now);
  })
  .Tooltip(tooltip => tooltip.Font("Open Sans, sans-serif").Visible(true).Format("{0:N2}")) %>

＆＃13;

Kendo MVC Bar Charts / Column chart CategoryAxis Fit day

1 个答案: