从MVC中的表创建图表

时间:2014-03-26 08:28:20

标签: c# asp.net-mvc html5 charts html-table

我的桌子看起来像这样:

@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。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:0)

您可以使用 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

希望这会有所帮助..