Insert a Javascript chart into a grouped table in ASP.NET, unique chart for each group

Question

I have an ASP.NET web application using EF Core and a SQL back end that tracks projects and bids. I created a razor page using the "List" template that generates a table using a foreach statement. I modified it to group by project number so the table displays individual bids grouped by project.

This is the code that creates the table body:

    @foreach (var grp in Model.Bids.GroupBy(m => new { m.NumberNavigation.Number, m.NumberNavigation.Name }))
    {
        <tr class="thead-light"><td colspan="2"><span class="h3">@grp.Key.Number - @grp.Key.Name</span></td></tr>

        {@foreach (var item in grp)
            {
                <tr>
                    <td>$ @Html.DisplayFor(modelItem => item.Bid)</td>
                    <td>@Html.DisplayFor(modelItem => item.ContractorNavigation.ContractorName)</td>
                    <td>@Html.DisplayFor(modelItem => item.NumberNavigation.StatusNavigation.StatusName)</td>
                </tr>
            }
        }
}
</tbody>

I am new to using chart.js and want to include a chart of bid amounts for each group in the table. I can get a chart to display using all of the bids, but that is not very helpful. Is there a way to embed something in each group that creates a javascript array that I can use to populate a chart and display in the table with each project group? The image below shows the table and where I would like to add a row containing the chart.

Answer 1

等待大神答复