JavaScript 图表不会出现在 AJAX UpdatePanel 中答案

【问题标题】：JavaScript chart does not appear inside AJAX UpdatePanelJavaScript 图表不会出现在 AJAX UpdatePanel 中
【发布时间】：2020-04-06 06:04:22
【问题描述】：

我的 C# Web 表单应用程序中有一个 JavaScript 图表 (Chart.js)。该图表将完美地出现在 AJAX UpdatePanel 之外，但是当我将它放在 UpdatePanel 中时，它根本不会出现。我已经阅读了一些相关的线程，并且我知道如何使 JavaScript 在 UpdatePanel 中工作，但 Chart.js 就是无法工作。可能是什么原因以及如何解决此问题？

任何帮助都会非常受欢迎。以下是我的代码：

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional" >
        <ContentTemplate>
          <asp:Button ID="btnShowData" runat="server" Text="Show Data" OnClick="btnShowData_Click" />
          <br/>
          <canvas id="myChart" width="400" height="250"></canvas>                    
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

protected void btnShowData_Click(object sender, EventArgs e)
{
    //Run method to get data from SQL database, which is converted to string and passed to JavaScript to create the chart.

    string X = stringArrayromDatabase;
    string scriptText = "<script type=text/javascript> chartFunction(" + stringArrayFromDatabase + ") </script>";

    //This code will work, meaning I've done things correctly with the RegisterStartupScriptmethod:
    ScriptManager.RegisterStartupScript(this, this.GetType(), "", "alert('Hello')", true);

    //Upon running this code, I expect my JavaScript chart will appear in the web page but it doesn't:
    ScriptManager.RegisterStartupScript(this, this.GetType(), "", scriptText, true);
}

编辑：下面是我的 chartFunction() 的 JavaScript 代码。这是我从这里复制的一个简单图表：https://jsfiddle.net/red_stapler/u5aanta8/1/。当我将它放在 AJAX UpdatePanel 之外时，此图表有效。

我使用 UpdatePanel 的原因是因为单击 btnShowData 按钮后，我运行一个方法从 SQL 获取数据，然后将其转换为字符串并传递给生成图表显示的 JavaScript 代码。因此，当我单击 btnShowData 时，我的整个页面都会刷新，这让我认为我需要使用 UpdatePanel。

function chartFunction(stringArrayFromDatabase) {
    var canvas = document.getElementById('myChart');
    var data = {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [
            {
                label: "My First dataset",
                borderColor: "rgba(75,192,192,1)",
                data: stringArrayFromDatabase,
            }
        ]
    };
    var option = {
        showLines: true
    };
    var myLineChart = new Chart(canvas,{
        type:'line',
        data:data,
      options:option
    }

【问题讨论】：

标签： javascript c# asp.net-ajax updatepanel

【解决方案1】：

你分享chartFunction()方法的代码也很重要，另一方面，分析你的代码，我认为你尝试按下一个按钮并显示图表的信息，根据这篇文章：@ 987654321@表示调用函数时不需要使用面板更新。

可以用javascript控制图表的更新，根据图表js文档：https://www.chartjs.org/docs/latest/developers/updates.html

祝你有美好的一天！

【讨论】：

感谢您的回复。我在帖子中包含了 chartFunction() 方法。
我还编辑了我的帖子，以阐明我使用更新面板的原因。这是因为我实际上是从 SQL 中获取数据并将其传递给 JavaScript，当我单击 btnShowData 按钮时，我看到整个页面都被刷新了