从MVC中的表格创建图表
本文关键字:创建 表格 MVC | 更新日期: 2023-09-27 17:53:20
我的表是这样的:
@model IEnumerable<CalcFactory.Models.Calculation>
<div id="exportToExcelDiv">
<table cellspacing="0" width="80%" id"detailTable">
<thead>
<tr>
<th>
Row
</th>
<th>
Date
</th>
<th>
Invoice amount
</th>
<th>
Interest rate
</th>
<th>
Interest amount
</th>
<th>
Amortization
</th>
<th>
Capital balance
</th>
<th></th>
</tr>
</thead>
@{var i = true;}
@{var rowID = 0;}
@{var cellID = 1;}
@foreach (var item in Model) {
if (i)
{
<tr id="@rowID">
<td align="center">
@rowID
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center" id="startValue">
@Html.DisplayFor(modelItem => item.StartValue)
</td>
</tr>
i = false;
rowID++;
}
<tr id="@rowID">
<td align="center">
@rowID
</td>
<td align="center" id="A-@cellID">
@Html.DisplayFor(modelItem => item.PeriodStartDate)
- @Html.DisplayFor(modelitem => item.PeriodEndDate)
</td>
<td align="center" id="B-@cellID">
@Html.DisplayFor(modelItem => item.InvoiceAmount)
</td>
<td align="center" id="C-@cellID">
@Html.DisplayFor(modelItem => item.InterestRate)
</td>
<td align="center" id="D-@cellID">
@Html.DisplayFor(modelItem => item.InterestAmount)
</td>
<td align="center" id="E-@cellID">
@Html.DisplayFor(modelItem => item.Amortization)
</td>
<td align="center" id="F-@cellID">
@Html.DisplayFor(modelItem => item.PresentValue)
</td>
</tr>
rowID++;
cellID++;
}
</table>
</div>
<div class="calcGraph">
@{
var myChart = new Chart(width: 400, height: 300);
}
我想从这个表格中创建一个漂亮的图表。我不知道如何绑定或将表中的值放入myChart。有什么办法可以做到吗?
你可以使用Microsoft Chat Control这是Dotnet Framework的一部分
支持35种不同的图表类型。
您可以在这里找到许多示例:
http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591MS图表与MVC的集成是非常容易的:参考这个:
http://www.codeproject.com/Articles/125230/ASP-NET-MVC-Chart-Control