Question

我有一个显示数周数据的剑道图表。现在我想更改日期选择器时更改开始日期和结束日期。但我无法弄清楚如何更改Category Axis的开始和结束日期

我已经制作了一个单独的按钮来触发更改最小值和最大值，但它始终显示初始输入。

我目前拥有什么

@(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();
}

Kendo图表使用脚本更改CategoryAxis的最小和最大日期

1 个答案: