在ASP.NET MVC中使用Shield Chart綁定到Web服務數據

對於我正在開發的新項目，我正在考慮使用ASP.NET MVC的Shield Chart來顯示一些用戶統計信息。我已經使用Html.ShieldChart()包裝器方法從我的剃刀視圖成功呈現了一個屏蔽的javascript圖表。圖表的實際數據來自JSON格式的本地休息服務。問題是，我無法讓圖表顯示JSON數據。 Shield UI demos展示了一種將MVC圖表綁定到遠程Web服務的方法，但我的情況完全不同。在ASP.NET MVC中使用Shield Chart綁定到Web服務數據

在我們的門戶網站中，我們已經在URL /api/users/12652/stats下實施了一項REST服務，該服務將爲具有給定ID的用戶返回一些JSON統計信息。該responsone包含sessions屬性，用於列出用戶的當月會議：

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

開始和結束時間之間的差異給出了session.I期間需要顯示柱狀圖，將顯示的時間Y軸上的所有會話都在一行中，而X軸將包含所有會話日期（取自開始值）。

來源

2013-08-20 user2492467

像這樣的東西應該讓你去：

<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回調內部的剃刀服務器表達式定義。我們這樣做是因爲我們需要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); 
     }) 
    } 
    }); 
});

Here is a JSBin of the above scenario一些硬編碼數據只把注意力集中在圖表初始化。

來源

2013-08-20 20:45:57 defrost

到目前爲止，10倍！現在我需要將X軸值映射到會話開始日期。你如何做到這一點在上述情況。我嘗試在axisX'.CategoricalValues（）'方法中使用類似的'@'模板，但是MVC抱怨'無法在空數據上使用委託System.Func'2 [System.Object，System.Object]。請在Widget構建器構造函數中指定Widget數據。' – user2492467

'.CategoricalValues（）'方法不會像類似'.Data（）'方法那樣的文本模板提供重載。爲了實現這種情況，併爲了更好地利用從瀏覽器訪問的Web服務的靈活性，您可能需要切換到JavaScript模式並使用純JavaScript代碼初始化圖表。我已經更新了我的答案以反映這種情況。 – defrost

在ASP.NET MVC中使用Shield Chart綁定到Web服務數據

回答

相關問題