Question

我正在尝试从SQL数据库生成交互式Google图表，但该图表未加载

我是一个网络方法，从数据库中提取信息，以图表形式显示。我正在尝试使用javascript / jquery调用此方法，但我的AJAX调用似乎存在问题。我尝试了许多不同的方法，似乎无法将我的手指放在确切的问题上

MyProfile.aspx

 <script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script>
 <script type="text/javascript" src="https://www.google.com/jsapi"> 
</script>
 <script type="text/javascript" 
 src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

        $.ajax({
            type: "POST",
            url: "MyProfile.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new 
 google.visualization.LineChart($("myChart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });

    window.onload = function drawChart() {
            var options = {
                title: '10 Most Recent Autoregulation Scores',
                width: 600,
                height: 400,
                bar: { groupWidth: "95%" },
                legend: { position: "none" },
                isStacked: true
            };
    }
</script>

<script src="https://kit.fontawesome.com/3c3e2594b3.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script 


 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/
popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js
/bootstrap.min.js"></script>

 .
 .
 .
 .

<body>
<form id="form1" runat="server">

 <div>
  <div id="myChart" style="width:500px; height:400px" /> 
 </div>

 MyProfile.aspx.cs

 [WebMethod]
    public List<object> GetChartData()
    {

        //Query to database
        string query = "Select TOP 10 SessionID, AutoreguationScore, 
 UserID, ScoreID from AutoregulationScores WHERE UserID=
 '" + Session["UID"] + "' ORDER BY ScoreID DESC";

        string constr = 

  ConfigurationManager.ConnectionStrings
 ["TrainingLoadManagerConnectionString"].ConnectionString;

        List<object> chartData = new List<object>();
        chartData.Add(new object[]
        {
                "AutoregulationScore", "SessionID"
        });

        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();

                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        chartData.Add(new object[]
                        {
                            sdr["AutoregulationScore"],
                            sdr["SessionID"]
                        });
                    }
                }
                con.Close();
                return chartData;
            }
        }

我应该看到正在显示一个交互式图表，但事实并非如此

Answer 1

尝试将GetChartData（）修改为静态

AJAX方法调用未定义-无法在ASP.NET C＃中加载GoogleCharts

1 个答案: