剑道图表变化分钟，并用于与脚本

Question

的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> 

Answer 1

我已经在javescript重建则CategoryAxis解决了这个脚本

function SetCategoryRange() 
{ 
    var grid = $("#dataChart").data("kendoChart"); 
    var startPicker = $("#startField").data("kendoDatePicker"); 
    var end = new Date(startPicker.value().getTime()); 
    end.setDate(end.getDate() + 7); 
    var start = kendo.toString(startPicker.value(), "yyyy/MM/dd HH:mm:ss"); 
    var end = kendo.toString(end, "yyyy/MM/dd HH:mm:ss"); 

    grid.setOptions({ 
     categoryAxis: [{ 
      labels: { visible: false }, 
      majorGridLines: { visible: false }, 
      type: "date", 
      baseUnit: "hours", 
      baseUnitStep: 1, 
      min: start, 
      max: end 
     }, 
     { 
      labels: { dateFormats: { days: "D" } }, 
      type: "date", 
      baseUnit: "days", 
      baseUnitStep: 1, 
      min: start, 
      max: end 
     }] 
    }); 
    grid.refresh(); 
}