从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。有什么办法可以做到吗?

从MVC中的表格创建图表

你可以使用Microsoft Chat Control这是Dotnet Framework的一部分

支持35种不同的图表类型。

您可以在这里找到许多示例:

http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591

MS图表与MVC的集成是非常容易的:参考这个:

http://www.codeproject.com/Articles/125230/ASP-NET-MVC-Chart-Control