0

我正在使用 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;" }))
4

1 回答 1

0

您需要对 ajax 响应数据做一些事情。您的成功函数应该有一个数据参数，如下所示：

success: function (data) {

然后，您可以根据确切的数据使用该数据刷新图表。

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

于 2013-08-14T14:26:43.223 回答