0
的CategoryAxis最大日期我有一個顯示價值的數據的周劍道圖表。現在我想改變的開始和結束日期,當我更改日期選擇器。但我無法弄清楚如何改變分類軸開始和結束日期劍道圖表變化分鐘,並用於與腳本
我做了一個單獨的按鈕來觸發最小和最大價值的變化,但它始終顯示初始輸入。
我現在有
@(Html.Kendo().DatePicker().Name("startField")
.Events(e => e.Change("startChanged"))
.Value(DateTime.Now.Date.AddDays(-6))
)
<input id="btnRefresh" type="submit" value="@Html.Resource("Refresh")" class="btn btn-default" />
@(Html.Kendo().Chart<ECOnX.Web.Modules.Containers.Mvc.Models.Container
.ContainerDataChartViewModel>()
.Name("dataChart")
.Title(Html.Resource("Week"))
.ChartArea(chartArea => chartArea.Background("transparent"))
.DataSource(ds => ds.Read(read => read.Action("ChartContainerData_Read", "ContainerController").Data("containerReadData")))
.Series(series =>
{
series.Line(model => model.AccuPercentage, categoryExpression: model => model.RecievedAt).Name(Html.Resource("Battery")).Color("#f0ee20");
series.Line(model => model.PercentageFilled, categoryExpression: model => model.RecievedAt).Name(Html.Resource("Filling")).Color("#76c364");
})
.ValueAxis(axis => axis
.Numeric("percentage")
.Min(0)
.Max(100)
.Line(line => line.Visible(false))
)
.CategoryAxis(axiss =>
{ axiss.Date().BaseUnit(ChartAxisBaseUnit.Hours).BaseUnitStep(1).Min(DateTime.Now.Date.AddDays(-6)).Max(DateTime.Now.Date.AddDays(1).AddMilliseconds(-1))
.MajorGridLines(lines => lines.Visible(false)).Labels(labels => labels.Visible(false));
})
.CategoryAxis(axiss =>
{ axiss.Date().BaseUnit(ChartAxisBaseUnit.Days).BaseUnitStep(1).Min(DateTime.Now.Date.AddDays(-6)).Max(DateTime.Now.Date.AddDays(1).AddMilliseconds(-1))
.Labels(labels => labels.DateFormats(formats => formats.Days("D")));
})
.Tooltip(tooltip => tooltip.Visible(true).Shared(true))
)
而且
$(document).ready(function() {
//change event
$("#btnRefresh").click(function() {
var grid = $("#dataChart").data("kendoChart");
var startPicker = $("#startField").data("kendoDatePicker");
grid.options.categoryAxis.min = startPicker.value();
var end = startPicker.value();
end.setDate(end.getDate() + 7);
grid.options.categoryAxis.max = end;
grid.refresh();
grid.dataSource.read();
});
});
function containerReadData() {
var startPicker = $("#startField").data("kendoDatePicker");
return {
containerId: $('#chartidfield').val(),
startDate: startPicker.value()
}
}
function startChanged() {
var grid = $("#dataChart").data("kendoChart");
grid.dataSource.read();
}
</script>