C# Highchart找不到从循环创建的表

我正在使用ASP.NETMVC，我有一个局部视图，其中我使用一个模型来创建一个表。问题是我认为我的highchart找不到表。因为当我在循环外使用一个示例表时，图表是呈现的

我的HTML和JS：

@if (Model != null)
{
for (var j = 0; j < Model.Calculation.Count; j++)
{
    var rowID = 1;
    var cellID = 1;


    <div class="compareTableId-@j">
    <legend>
        <h4 id="excelFileName">@Html.DisplayFor(m => m.Calculation[j][0].CalculationName)</h4>
    </legend>
<table cellspacing="0" id="detailTable-@j" class="compareTable">
            <thead>
                <tr>
                    <th>
                        Row
                    </th>
                    <th>
                        Date
                    </th>
                    @if (Model.InvoiceAmount && Model.InterestAmount)
                    {
                            <th>
                                Invoice amount
                            </th>
                            <th>
                                Interest amount
                            </th>
                    }  
                </tr>
            </thead>
            @for (int k = 0; k < Model.Calculation[j].Count; k++)
            {
                <tr id="@rowID">
                    <td align="center">
                        @rowID
                    </td>
                    <td align="center">
                        @Html.DisplayFor(m => m.Calculation[j][k].PeriodStartDate)
                        - @Html.DisplayFor(m => m.Calculation[j][k].PeriodEndDate)
                    </td>
                    @if (Model.InvoiceAmount && Model.InterestAmount)
                    {
                            <td align="center" id="A-@cellID">
                            @Html.DisplayFor(m => m.Calculation[j][k].InvoiceAmount)
                            </td>
                            <td align="center" id="B-@cellID">
                            @Html.DisplayFor(m => m.Calculation[j][k].InterestAmount)
                            </td>
                    }
                </tr>
                    rowID++;
                    cellID++;
            }
            <tr id="@rowID">
                <td align="center">
                    Total:
                </td>
                <td align="center">

                </td>
                @if (Model.InvoiceAmount && Model.InterestAmount)
                {
                        <td align="center">
                        @Model.Calculation[j].Sum(item => item.InvoiceAmount).ToString("0.00")
                        </td>
                        <td align="center">
                        @Model.Calculation[j].Sum(item => item.InterestAmount).ToString("0.00")
                        </td>
                }
            </tr>
        </table>
        </div>
    }
}
<div id="chartContainer"></div>



<script>
$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'chartContainer',
            type: 'line',

        },
        data: {
            table: document.getElementById('detailTable-0')
        },

        title: {
            text: 'Graph of your calculation'
        },

        xAxis: {
        allowDecimals: false,
        id: 'x-axis',
        title: {
            text: 'Payment Periods'
            }
        },

        yAxis: {
            allowDecimals: false,
            title: {
                text: ''
            }
        }

    });
});

上面的代码不起作用。我也尝试过在buttonclick上调用JS，但仍然不起作用

但是，当我将一个示例表放在图表呈现的循环之外时，同样的代码也在工作

示例表：

<table id="datatable">
<thead>
    <tr>
        <th></th>
        <th>Jane</th>
        <th>John</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>Apples</th>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <th>Pears</th>
        <td>2</td>
        <td>0</td>
    </tr>
    <tr>
        <th>Plums</th>
        <td>5</td>
        <td>11</td>
    </tr>
    <tr>
        <th>Bananas</th>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <th>Oranges</th>
        <td>2</td>
        <td>4</td>
    </tr>
</tbody>
</table>

因此，当我将getElementById从detailTable-0更改为dataTable时，它就起作用了

---

当我试图从循环中创建的第一个表中呈现图表时，有人看到highchart代码的问题吗？或者桌子。我已经检查了表ID，它与detailTable-0相同。部分视图是通过ajax加载的吗？不是。我正在使用Html.BeginForm来呈现一个新视图，但即使我尝试在buttonclick上呈现图表，它也不起作用，然后detailTable-0已经填充了数据，因为我看到您的表id与您得到的不同。单击buttonclick后，当您检查javascript控制台是否有错误时，它说了什么？