如何通过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字符串(至少如果您添加到问题中的字符串是您在jsonvar中的客户端上看到的字符串).如果你将dataType设置为"json",jQuery通常应该为你解析(不知道为什么没有发生这种情况 - 你应该仔细检查dataTypeparam设置是否正确).

您可以尝试自己解析它; 除此之外,您还应该使用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成功调用之外的图表上调用refresh.你不需要refresh在使用时setDataSource,但即使你需要这样做,它也必须在回调中.否则它会在ajax调用完成之前发生.