使用 jquery ajax 刷新 Telerik MVC 图表答案

【问题标题】：Refresh Telerik MVC chart using jquery ajax使用 jquery ajax 刷新 Telerik MVC 图表
【发布时间】：2013-08-14 14:17:13
【问题描述】：

我正在使用 jquery ajax 调用将返回 ViewModel 的操作方法，如何刷新 Telerik 图表以显示返回的数据？

这是我目前所拥有的：

Javascript：

<script type="text/javascript">
    $(document).ready(function () {
        $(".GenerateCharts").live('click', function () {
            $("#imgprogress").css("display", "block");
            var monthVar = $("#chartMonth").val();
            var yearVar = $("#chartYear").val();
            //************************************
            $.ajax({
                type: "POST",
                url: '@Url.Action("MyCharts", "Charts")',
                data: JSON.stringify({ selectedMonth: monthVar, selectedYear: yearVar, chartId: 1 }),
                success: function () {
                    $("#TargetChart").data("tChart").refresh(); // <-- Didn't work!
                },
                dataType: "json",
                contentType: "application/json"
            });

            $("#imgprogress").css("display", "none");
        });
    });
</script>

Telerik 图表：

@(Html.Telerik().Chart(Model.QueueTimeViewModel.QueueTimeMonth)
    .Name("TargetChart")
    .Title("Chart[1]")
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
    .Series(series =>
             {
              series.Column(model => model.ImmigrationTime).Name(APMS.Resources.InspectionReports.Resource.ImmigrationAverage).Labels(label => label.Visible(true)).Color("#00ff00");
              series.Column(model => model.TransitTime).Name(APMS.Resources.InspectionReports.Resource.TransitAverage).Labels(label => label.Visible(true)).Color("#FF0000");
              series.Column(model => model.StaffTime).Name(APMS.Resources.InspectionReports.Resource.StaffAverage).Labels(label => label.Visible(true)).Color("#F09800");
              series.Column(model => model.TargetTime).Name(APMS.Resources.InspectionReports.Resource.Target).Labels(label => label.Visible(true)).Color("#0000ff");
            })
     .CategoryAxis(axis => axis
                    .Categories(" ")
                    .Line(line => line.Visible(true))
                    .Labels(labels => labels.Padding(0, 0, 0, 0)))
                    .ValueAxis(axis => axis
                    .Numeric().Labels(labels => labels.Format("{0} min")))
      .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Format("{0}")
                    .Template("<#= series.name #>: <#= value #> min"))
      .HtmlAttributes(new { style = "width: 600px; height: 400px;  z-index:-1;" }))

【问题讨论】：

当你说它返回一个 ViewModel 时，你的意思是它返回一个原始数据集还是返回一些渲染的 HTML 来显示 ViewModel？
@asymptoticFault 它返回原始数据集
好的。我不熟悉 Telerik 助手，所以他们的插件有一些功能可以提供数据吗？我注意到你在插件上调用refresh()，但这是做什么的？

标签： jquery asp.net-mvc asp.net-mvc-4 telerik-charting

【解决方案1】：

您需要对 ajax 响应数据做一些事情。你的成功函数应该有一个像这样的数据参数：

success: function (data) {

然后，您可以根据数据的具体内容使用该数据刷新图表。

如果插件没有办法为其提供新数据来刷新图表，那么我会说在服务器上重新渲染图表并只发回 HTML 会更容易，也可能更好的数据。从最佳实践的角度来看，这会更好，因为它将视图逻辑保留在 Razor 视图中，而不是使用 javascript 在客户端上完全或部分复制它。

【讨论】：