所以我有一个使用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 })
))
到我的图表配置中，这将很好地填充图表，而无需使用page Model。即该数据对于图表而言是正确的。
数据源期望使用数组作为其值data，但看起来json您要分配的变量包含JSON字符串（至少如果您添加到问题中的字符串是您在jsonvar客户端上看到的字符串）。如果您将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成功调用之外调用图表上的刷新。您无需refresh在使用时使用setDataSource，但即使您需要这样做，它也必须位于回调中。否则，它会在ajax调用完成之前发生。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句