Highchart无法找到从循环创建的表

Question

我使用的是ASP.NET MVC，我有一个局部视图，我使用模型创建一个表。问题是我认为我的高图无法找到表格。因为当我在循环外部使用示例表时，将呈现图表。

我的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: ''
            }
        }

    });
});

上面的代码无效。我也试过在按钮上调用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>

因此，当我将detailTable-0中的getElementById更改为dataTable时，它可以正常工作。

当我尝试从循环内创建的第一个表格渲染图表时，是否有人看到我的高图代码存在问题？ （或表）。我检查了表ID，它是相同的（detailTable-0）