如何通过 javascript JSON 更新 KendoUI 图表？

Posted 2023-05-07

【中文标题】如何通过 javascript JSON 更新 KendoUI 图表？

【英文标题】：How do I update a KendoUI chart via javascript JSON?

【发布时间】：2014-01-06 13:16:40

【问题描述】：

所以我有一个使用 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。 即图表的数据是正确的。

【问题讨论】：

返回的 JSON 是什么样子的？

@LarsHöppner 将 JSON 添加到问题中

【参考方案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 调用完成之前发生。

【讨论】：

抱歉我的混淆我Stringified我的JSON使它人类可读。使用上面的代码按预期工作：D