Интерактивные диаграммы Google не загружаются при обновлении UpdatePanel

Question

Помощь! Я потратил несколько часов на изучение этого и не могу найти решение. Я использую API интерактивных диаграмм Google в UpdatePanel, который асинхронно обновляется, когда я изменяю выделение в раскрывающемся списке, что в конечном итоге изменяет набор данных для диаграммы Google. Проблема в том, что диаграмма исчезает при обновлении UpdatePanel. Я использую RegisterStartupScript, и я тестировал предупреждение javascript в панели обновления, чтобы подтвердить, что javascript работает в UpdatePanel, когда он обновляется, поэтому проблема кажется ограниченной только тем, что делает JavaScript javascript. Возможно, это setOnLoadCallback, на самом деле не вызывающий drawChart после обновления UpdatePanel? Не уверен, что это так или как это исправить.

Код, приведенный ниже, находится в общедоступном Sub, который вызывается в Page_Load, и когда выбранное значение выпадающего списка изменяется.

Dim strOutput As New StringBuilder 

    strOutput.Append("google.load('visualization', '1.0', { 'packages': ['corechart'] });") 
    strOutput.Append("google.setOnLoadCallback(drawChart);") 
    strOutput.Append("function drawChart() {") 
    strOutput.Append("var data = new google.visualization.DataTable();") 
    strOutput.Append("data.addColumn('string', 'Domain');") 
    strOutput.Append("data.addColumn('number', 'Value');") 
    strOutput.Append("data.addRows([") 

    Dim sqlSelect As New SqlClient.SqlCommand 
    sqlSelect.CommandText = String.Format("spAnalytics_ViewsByDomain") 
    sqlSelect.CommandType = CommandType.StoredProcedure 
    Dim dtChartData As DataTable = clsDB.FillDT(sqlSelect) 

    Dim commaCounter As Integer = 1 
    For Each row As DataRow In dtChartData.Rows 
     If ddlStat.SelectedValue = "hits" Then 
      strOutput.Append(String.Format("['{0}',{1}]", row.Item("domain"), row.Item("hit_count"))) 
     ElseIf ddlStat.SelectedValue = "sessions" Then 
      strOutput.Append(String.Format("['{0}',{1}]", row.Item("domain"), row.Item("session_count"))) 
     End If 
     If commaCounter <> dtChartData.Rows.Count Then strOutput.Append(",") 
     commaCounter = commaCounter + 1 
    Next 

    strOutput.Append("]);") 

    strOutput.Append("var options = { 'title': 'Views by domain',") 
    strOutput.Append("'width': 500,") 
    strOutput.Append("'height': 300") 
    strOutput.Append("};") 
    strOutput.Append("var chart = new google.visualization.PieChart(document.getElementById('chart_div'));") 
    strOutput.Append("chart.draw(data, options);") 
    strOutput.Append("}") 

    ScriptManager.RegisterStartupScript(litDomains, GetType(String), "blahblah", strOutput.ToString, True) 

Answer 1

Вы можете оставить google.setOnloadCallback и просто добавить вызов функции непосредственно в конец.

Answer 2

У меня была такая же проблема с Firefox. диаграмма сделана правильно перерисована в Chrome, IE и Safari. Я нашел решение, но это то, что я бы назвал kludge. Однако я доволен, и это работает.

Я сделал некоторое обнаружение браузера, и только для Firefox я добавил setTimeout из 10 мс вокруг вызова, чтобы перерисовать код.

Единственное другое решение, о котором я читал, это заменить UpdatePanel на JS AJAX, и я нашел это решение предпочтительным.

Answer 3

Я столкнулся с подобной проблемой, используя диаграммы Google с панелью обновлений, поэтому отправляю решение.

Javascript-код прерывается после асинхронного или частичного обновления на панели обновления. Пожалуйста, обратитесь к следующей статье, чтобы понять причину и решение: Update panel and jQuery issue.

Чтобы исправить проблему, связанную с частичным обновлением, просто добавьте следующий код в дополнение к вашему коду, чтобы повторно применить код javascript. Этот код вызывает функцию, чтобы нарисовать диаграмму следующим образом:

<script type="text/javascript"> 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(function (sender, e) { 
     if (sender._postBackSettings.panelsToUpdate != null) { 
      //Event Raised when the Async Postback is completed. 
     } 

     // Your function which draws chart 
     drawChart(); 

    }); 

</script>