首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >AJAX UpdatePanel中不显示JavaScript图表

AJAX UpdatePanel中不显示JavaScript图表
EN

Stack Overflow用户
提问于 2020-04-06 14:04:23
回答 1查看 365关注 0票数 0

我的C# web forms应用程序中有一个JavaScript图表(Chart.js)。该图表将完美地显示在AJAX UpdatePanel之外,但是当我将其放入UpdatePanel中时,它根本不会出现。我已经阅读了一些相关的帖子,我知道如何让JavaScript在UpdatePanel中工作,但Chart.js就是不能工作。可能的原因是什么&我如何纠正这个问题?

任何帮助都将得到极大的重视。下面是我的代码:

代码语言:javascript
复制
<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>
代码语言:javascript
复制
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。

代码语言:javascript
复制
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
    }
EN

回答 1

Stack Overflow用户

发布于 2020-04-06 14:26:05

同样重要的是,你分享chartFunction()方法的代码,另一方面,分析你的代码,我认为你试着按下一个按钮并显示图形的信息,根据这篇文章:https://stackoverflow.com/a/12260986/12520015它说你在调用函数时不需要使用面板更新。

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

祝你有愉快的一天!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61053801

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档