1
我已經創建了MVC 5(使用Razor語法),其中我想使用morris-area-chart來顯示數據。我想使用模型(即數據庫)中的數據,我將其傳入View中,以便可以在morris-area-chart中使用它。MVC 5(Razor)使用morris面積圖在View中顯示數據庫數據
有人能告訴我如何構建並替換下面的morris-area-chart配置元素數據,所以這些元素是用從模型中獲得的數據來設置的嗎?
data: [{ period: '2010-01-01', iphone: 2666, ipad: null, itouch: 2647 },
{ period: '2010-01-02', iphone: 2778, ipad: 2294, itouch: 2441 },
{ period: '2010-01-03', iphone: 4912, ipad: 1969, itouch: 2501 },
{ period: '2010-01-04', iphone: 3767, ipad: 3597, itouch: 5689 }],
labels: ['iPhone', 'iPad', 'iPod Touch'],
如果使用模型和剃刀語法是不可能實現我的上述請求,那麼請演示顯示從模型(即數據庫)數據的正確方法。
檢視:
@model Project.Models.ShowGraphViewModel
....
<div id="morris-area-chart"></div>
@section Styles {
@Styles.Render("~/plugins/morrisStyles")
}
@section Scripts {
@Scripts.Render("~/plugins/morris")
<script>
Morris.Area({
element: 'morris-area-chart',
data: [{ period: '2010-01-01', iphone: 2666, ipad: null, itouch: 2647 },
{ period: '2010-01-02', iphone: 2778, ipad: 2294, itouch: 2441 },
{ period: '2010-01-03', iphone: 4912, ipad: 1969, itouch: 2501 },
{ period: '2010-01-04', iphone: 3767, ipad: 3597, itouch: 5689 }],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
xLabels: "day",
pointSize: 2,
hideHover: 'auto',
resize: true,
lineColors: ['#87d6c6', '#54cdb4', '#1ab394'],
lineWidth: 2,
pointSize: 1,
});
</script>
}
控制器:
// GET: ShowGraph
public ActionResult ShowGraph()
{
// Create model to pass to View
ShowGraphViewModel graphModel = new ShowGraphViewModel();
// How to construct following for morris-area-chart?
// data: ?.....
// labels = ?....
return View(graphModel);
}
型號:
public class ShowGraphViewModel
{
//What do I put in here?
}
您的解決方案非常完美,實施也非常簡單。謝謝 :) – Lukasz