从 MVC 中的表创建图表答案

【问题标题】：Create chart from table in MVC从 MVC 中的表创建图表
【发布时间】：2014-05-04 12:19:59
【问题描述】：

我的桌子是这样的：

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

【问题讨论】：

你可以试试 JqPlot。

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

【解决方案1】：

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

希望这会有所帮助..

【讨论】：