0

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

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

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

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

4

1 回答 1

0

这样的事情应该让你去：

<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中series'.Data()方法的参数。这具有在javascript初始化选项中呈现自调用函数表达式的效果，这有助于我们将服务响应映射到series数据选项。

注意最后一个.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，其中包含一些硬编码数据，只是为了专注于图表初始化。

于 2013-08-20T20:45:57.753 回答