JavaScript图表未出现在AJAX UpdatePanel中

问题描述 投票:0回答:1

我的C#网络表单应用程序中有一个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)
{
    string scriptText = "<script type=text/javascript> chartFunction() </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之外时,此图表将起作用。

function chartFunction() {
    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: [65, 59, 80, 25, 56],
            }
        ]
    };
    var option = {
        showLines: true
    };
    var myLineChart = new Chart(canvas,{
        type:'line',
        data:data,
      options:option
    }
javascript c# asp.net-ajax updatepanel
1个回答
0
投票

另外,共享chartFunction()方法的代码也很重要,另一方面,在分析代码时,我认为您尝试按一个按钮并显示图的信息,根据这篇文章:[C0 ]表示在调用函数时不需要使用面板更新。

根据图表js文档,您可以使用javascript控制图表的更新:https://stackoverflow.com/a/12260986/12520015

祝您有美好的一天!

© www.soinside.com 2019 - 2024. All rights reserved.