在ASP.NET MVC中使用屏蔽图绑定到web服务数据

Using Shield Chart in ASP.NET MVC to bind to web service data

本文关键字：绑定 web 数据 服务 屏蔽 NET ASP MVC      更新时间：2023-09-26

对于我正在处理的一个新项目，我正在考虑使用用于ASP.NET MVC的Shield Chart来显示一些用户统计信息。我已经使用Html.ShieldChart()包装器方法成功地从剃刀视图中呈现了一个屏蔽javascript图表。图表的实际数据来自JSON格式的本地rest服务。问题是，我无法让图表显示JSON数据。Shield UI演示展示了一种将MVC图表绑定到远程web服务的方法，但我的场景完全不同。

在我们的门户网站中，我们在url /api/users/12652/stats下实现了一个REST服务，该服务将为具有给定ID的用户返回一些JSON统计信息。responsone包含sessions属性，该属性列出了用户当月的会话：

{
    sessions: [{ start: 1379624400000, end: 1377023690271 }, { ... }]
}

开始时间和结束时间之间的差异给出了会话的持续时间。我需要显示一个条形图，它将在Y轴上的一行中显示所有会话的持续时间，而X轴将包含所有会话日期（从开始值开始）。

这样的东西应该会让你开始：

<div id="chart"></div>
<script type="text/javascript">
$(function () {
    $.get("/api/users/12652/stats", function (data) {
        var sessions = sessions;
        @(Html.ShieldChart()
            .Name("chart")
            .PrimaryHeader(header => header.Text("User session duration (in minutes)"))
            .DataSeries(series => series.Bar()
                .Data(@<text>
                    (function () {
                        return $.map(sessions, function (item) {
                            //return the difference between the end and start time in minutes
                            return (item.end - item.start) / 1000 / 60;
                        });
                    })()
                </text>))
            .GetScript())
    });
});
</script>

请注意，如何在服务请求的javascript回调中使用Razor服务器表达式来定义Shield Chart。我们这样做是因为我们需要session变量来包含从服务返回的实际数据。然后，我们可以使用<text></text>模板中的自调用函数作为MVC中系列.Data()方法的参数。这具有在javascript初始化选项中呈现自调用函数表达式的效果，帮助我们将服务响应映射到系列数据选项。

请注意最后一次.GetScript()方法调用。我们使用它只呈现图表小部件的初始化脚本，而不是整个小部件标记和脚本。这允许在HTML页面中用javascript代码初始化小部件。

但是，对于将X轴分类值绑定到服务响应，您没有类似的方法可以使用@<text></text>模板。对于这种情况，最好使用纯javascript初始化：

$(function() {
  $("#chart").shieldChart({
    primaryHeader: {
      text: "User session duration (in minutes)"
    },
    dataSeries: [{
      seriesType: 'bar',
      data: $.map(sessions, function(item) {
        return (item.end - item.start) / 1000 / 60;
      })
    }],
    axisX: {
      axisType: "datetime",
      dataStart: sessions[0].start,
      categoricalValues: $.map(sessions, function(item) {        
        return new Date(item.start);
      })
    }
  });
});

这里是上面场景的JSBin，其中包含一些硬编码数据，只是为了集中精力进行图表初始化。

相关文章：