剑道 UI 图表 - 在数据绑定后更新数据源

Question

我有一些操作需要在图表数据绑定期间/之后执行。

其中一件事是我添加了缺少的类别（月）。我的问题是，如果我将这些缺失值添加到数据源，它会再次触发数据绑定事件。

有没有更好的方法可以做到这一点？

@(Html.Kendo().Chart<MyModel>()
    .Name("chart")
    .DataSource(ds => ds.Read(read => read.Action("GetData", "Home")))
    .CategoryAxis(a => a.Date().Categories(c => c.Date))
    .ValueAxis(v => v.Numeric().Min(0).Max(100))
    .Series(series => series.Column(d => d.Value))
    .Events(e => e.DataBound("dataBound"))
)
function dataBound(e) {
    var chart = e.sender;
    var today = new Date(); 
    // Add current month to chart
    chart.dataSource.add({
        CategoryDate: today,
        Value: 0
    });
}

Answer 1

每次添加、修改DataSource或删除DataSource中的数据时，都会触发事件Change，每个DataSource的小部件都会在DataSource更改后触发事件DataBound。

因此，您的DataBound事件被触发两次，而您的图表使用远程服务来Read其数据，内部将触发 2 个事件来实现它。将调用事件 RequestStart 和 RequestEnd，因此我建议您在数据源RequestEnd事件中添加缺少的类别。

在 RequestEnd 事件中，您可以修改其响应数据，您可以调试它以查看此响应的完整结构;通常它将具有 Data 属性，这是您需要更改的属性。

示例代码

@(Html.Kendo().Chart<MyModel>()
    .Name("chart")
    .DataSource(ds => ds.Read(read => read.Action("GetData", "Home"))
                        .Events(evt => evt.RequestEnd("onChartDsRequestEnd")))
    .CategoryAxis(a => a.Date().Categories(c => c.Date))
    .ValueAxis(v => v.Numeric().Min(0).Max(100))
    .Series(series => series.Column(d => d.Value))
    .Events(e => e.DataBound("dataBound"))
)
function onChartDsRequestEnd(e) {
    // data you should modify before its being placed as datasource's data
    var responseData = e.response;
    responseData.push({.......});
}

数据源请求结束文档