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

Question

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

Код ниже находится в Public 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

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

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

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

Answer 2

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

Answer 3

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

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

Чтобы устранить проблему, связанную с частичным обновлением, просто добавьте следующий код в дополнение к своему коду, чтобы повторно применитькод 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>