如何在循环中创建谷歌图表

how to create google charts in a loop

本文关键字：谷歌创建循环更新时间：2023-09-26

嗨，我在谷歌图表工作，一切都很好。图表加载完美，但现在我在一个情况下，我需要在一个循环加载图表，我无法延迟绑定图表。这里是c# mvc代码

<table>
            <tr>
                <td>
                    <% Html.RenderPartial("ChartsDetailPDF", ViewData); %> //this chart code is working fine
                </td>
            </tr>
            <% var allChildCategories = ViewData["allChildCategories"] as List<Category>;
               if (allChildCategories != null)
               {
                   foreach (var item in allChildCategories)
                   {
                       var categoryId = item.Id; 
                       // from here i need categoryId and from this id i can get jsondata from server calling ajax function
            %>
            <tr>
                <td>
                    <script>
     $(document).ready(function () {
 google.load('visualization', '1.1', { 'packages': ['corechart'], 'callback': drawChartLateBinding("<%=categoryId %>", "<%=userId %>", "<% =startDate %>", "<% =endDate %>") }); 
      });
 function drawChartLateBinding(categoryId ,userId,startDate,endDate) {
                $('#chartControlRepeater' + categoryId).load( function () { 
                    drawBarChartAjaxfunction(categoryId, userId, startDate, endDate);
                }); 

                    </script>
                   <div  id="chartDiv_<%=categoryId %>" data-categoryId="<%=categoryId%>" data-userId="<%=userId %>" data-startdate="<% =startDate %>" data-enddate="<% =endDate %>" style="width: 100%; height: 450px;">
                  </div>                                     
                </td>
            </tr>
            <%}
               } %>
 </table>

问题不清楚(或者我没有理解)，但这是图表初始化和绘制的基本步骤:

var chart_data_categoryId = new google.visualization.DataTable(data);
var chart_categoryId = new google.visualization.ColumnChart(document.getElementById(chart_div_categoryId));
chart_categoryId.draw(chart_data_categoryId, options);