如何通过javascript JSON更新KendoUI图表

Question

所以我有一个使用 MVC 样式配置配置的图表......

@(Html.Kendo().Chart<DIMVC.ViewModel.CompanyProduction>(Model.CompanyProduction)
     .Name("Chart")
     .Title("Files sent")
     .Legend(legend => legend
     .Position(ChartLegendPosition.Bottom)
 )
 .ChartArea(chartArea => chartArea
     .Background("transparent")
 )
 .SeriesDefaults(seriesDefaults =>
     seriesDefaults.Line().Style(ChartLineStyle.Smooth)
 )
.Series(series => { 
     series.Line(model => model.SentFiles).Name("Sent Files");
     ...  { lots more series added here }
}
.CategoryAxis(axis => axis
     .Categories(model => model.MonthDisplay)
     .Labels(labels => labels.Rotation(-90))
)
.ValueAxis(axis => axis.Numeric()
     .Labels(labels => labels.Format("{0:N0}"))
     .MajorUnit(10000)
)
.Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0:N0}")
)
.Events(e => e
    .SeriesClick("onSeriesClick")
)

）

我在页面上还有一个滑块。当滑块值更改时，我会处理此事件。

@(Html.Kendo().RangeSlider()
    .Name("yearRange")
    .Min(2000)
    .Max(DateTime.Today.Year)
    .SmallStep(1)
    .LargeStep(5)
    .Values(Model.MinYear, Model.MaxYear)
    .Events(e => e.Change("yearRangeChange"))
 )

JavaScript 方法

function yearRangeChange(e)
{
     var url = "/FetchData/";
     $.ajax({
         type: "GET",
         url: url,
         data: { startYear: e.values[0], endYear: e.values[1] },
         dataType: "json",
         success: function (json) {
        $("#DINETChart").kendoChart({
            dataSource: {
               data: json
        }
    });
     var chart = $("#DINETChart").data("kendoChart");
    chart.refresh();
 }
 }); 
 }

现在，当图表更新时，网格只是空白。

成功调用 json 请求并检索数据。但在填充图表后，图表为空白。

有人有什么建议吗？

*编辑*

添加返回的 JSON 示例

"[{"CompanyID":1,"Year":2011,"Month":8,"SentFiles":1666,"ReceivedFiles":1632,"SentData":12803.674593292486,"ReceivedData":11908.047586546765,"Note":null,"MonthDisplay":"Aug","CompanyDisplay":null},{"CompanyID":1,"Year":2013,"Month":10,"SentFiles":21004,"ReceivedFiles":20387,"SentData":157376.825542573,"ReceivedData":152878.87845794103,"Note":null,"MonthDisplay":"Oct","CompanyDisplay":null},{"CompanyID":1,"Year":2013,"Month":4,"SentFiles":9989,"ReceivedFiles":9880,"SentData":74913.53277995327,"ReceivedData":75145.16331588416,"Note":null,"MonthDisplay":"Apr","CompanyDisplay":null},{"CompanyID":1,"Year":2013,"Month":11,"SentFiles":25956,"ReceivedFiles":25249,"SentData":196155.8977337967,"ReceivedData":189320.44546897494,"Note":null,"MonthDisplay":"Nov","CompanyDisplay":null}]"

我还想指出，如果我添加这个

.DataSource(ds => ds.Read(read =>
    read.Action("FetchData", "Home", new { startYear = 2012, endYear = 2013 })
))

对于我的图表配置，这将很好地填充图表，而无需使用页面Model。即图表的数据是正确的。

Answer 1

数据源需要一个数组作为其data的值，但看起来您分配的json变量包含一个 JSON 字符串（至少如果您添加到问题的字符串是您在客户端上看到的 json var）。 如果你将 dataType 设置为 "json"，jQuery 通常应该为你解析它（不确定为什么你没有发生这种情况 - 你应该仔细检查dataType参数设置正确）。

您可以尝试自己解析它;除此之外，您还应该使用chart.setDataSource()而不是创建新图表。他们的方式是你现在这样做，你只是用没有配置的图表替换原始图表的配置。在回调中尝试这样的事情：

var data = JSON.parse(json);
var chart = $("#DINETChart").data("kendoChart");
var dataSource = new kendo.data.DataSource({
    data: data
});
chart.setDataSource(dataSource);

请注意，在 yearRangeChange 函数中，您尝试在 ajax 成功调用之外的图表上调用刷新。使用setDataSource时不需要refresh，但即使你需要这样做，它也必须在回调中。否则，它会在 ajax 调用完成之前发生。