使用Kendo MVC条形图/柱形图时遇到问题。
在类别轴中，我放置了日期值。如果我在CategoryAxis中选择“ .BaseUnit（ChartAxisBaseUnit.Days）”选项，则会获得该月的所有日期值，包括没有值的天。
有什么方法可以隐藏没有价值的日子？
这是我所拥有的；
<%= 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,…}
最佳答案
我找到了解决方案。我不在CategoryAxis（）中使用Date（）方法。我认为这些日期值只是“字符串”值。我只是格式化日期并显示它。为了对日期值进行排序（升序），我在服务器端进行了处理。
// 服务器端
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);
}// 客户端
<%= 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}")) %>关于javascript - Kendo MVC条形图/柱形图类别轴拟合日，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30187652/