Javascript ajax从C＃中获取数据未定义

问题描述

我想用google图表构建一个网页。我试图用c＃构建它作为一个web表单，并从本地数据库获取数据到javascript。但是，这不工作，我有数据是在Ajax的响应未定义。
这是c＃的代码

$ p $
[ScriptMethod（ResponseFormat = ResponseFormat.Json） ]
public static object [] GetChartData（）
{
List< GoogleChartData> data = new List< GoogleChartData>（）;
//这里MyDatabaseEntities是我们的dbContext
使用（MyDatabaseEntities dc = new MyDatabaseEntities（））
{
data = dc.GoogleChartDatas.ToList（）;
}
var chartData = new object [data.Count + 1];
chartData [0] =新对象[] {
产品类别，
收入金额
};
int j = 0;
foreach（var i in data）
{
j ++;
chartData [j] =新对象[] {i.Product_Category，i.RevenueAmount};
}返回chartData;
}

和javascript代码是：

 < asp：Content ID =Content1ContentPlaceHolderID =MainContentrunat =server> 
 < script src =Scripts / jquery-1.10.2.js>< / script> 
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script> 
< script> 
 var chartData; //用于保存图表数据的globar变量
 google.load（visualization，1，{packages：[corechart]}）; 
 
 //这里我们将填充chartData 
 
 $（document）.ready（function（）{
 
 $ .ajax（{
 url：GoogleChart.aspx / GetChartData，
 data：，
 dataType：json，
类型：post，
 contentType：application / json ; charset = utf-8，
成功：函数（数据）{
 chartData = data.d; 
 alert（chartData）; 
}，
错误：函数（）{
 alert（加载数据时出错！请重试。）; 
} 
}）。done（function（）{
 //完成加载数据后
 google.setOnLoadCallback（drawChart）; 
 drawChart（）; 
}）; 
}）; 
 
 
函数drawChart（）{
 var data = google.visualization.arrayToDataTable（chartData）; 
 
 var options = {
 title：公司收入，
 pointSize：5 
}; 
 
 var pieChart = new google.visualization.PieChart（document.getElementById（'chart_div'））; 
 pieChart.draw（data，options）; 
 
} 
 
< / script> 
< div id =chartstyle =width：500px; height：400px> 
< / div> 
  

请帮助！如何在ajax中获取我的表数据并将其放入图表中？ 首先，推荐不使用

< script src =https://www.gstatic.com/charts/loader.js >< / script>

只会改变加载语句...

  google.charts.load（'current'，{
 callback ：drawChart，
 packages：['corechart'] 
}）; 
  

如上所示，回调可以设置在加载语句中

回调会让你知道什么时候谷歌图表已经加载，以及dom

因此不需要 setOnLoadCallback 或 $（document）.ready

/ p>

 < asp：Content ID =Content1ContentPlaceHolderID =MainContentrunat =server> 
 < script src =Scripts / jquery-1.10.2.js>< / script> 
< script src =https://www.gstatic.com/charts/loader.js>< / script> 
< script> 
 google.charts.load（'current'，{
 callback：drawChart，
 packages：['corechart'] 
}）; 
 
函数drawChart（）{
 $ .ajax（{
 url：GoogleChart.aspx / GetChartData，
 data：，
 dataType ：json，
 type：post，
 contentType：application / json; charset = utf-8，
}）。done（function（data）{
 var data = google.visualization.arrayToDataTable（data.d）; 
 var options = {
 title：Company Revenue，
 pointSize：5 
}; 
 var pieChart = new google.visualization.PieChart（document.getElementById（'chart_div'））; 
 pieChart.draw（data，options）; 
}）。fail（function（jqXHR，textStatus，errorThrown ）{
 console.log（Error：+ errorThrown）; 
}）; 
} 
< / script> 
< div id =chartstyle =width：500px; height：400px> 
< / div> 
  

I want to build a web page with google charts. I tried to build it with c# as a web form and get data from local database to javascript. But that's not working and i'm having data is undefined in the response of ajax.This is the code of c#

        [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static object[] GetChartData()
    {
        List<GoogleChartData> data = new List<GoogleChartData>();
        //Here MyDatabaseEntities  is our dbContext
        using (MyDatabaseEntities dc = new MyDatabaseEntities())
        {
            data = dc.GoogleChartDatas.ToList();
        }
        var chartData = new object[data.Count + 1];
        chartData[0] = new object[]{
                "Product Category",
                "Revenue Amount"
            };
        int j = 0;
        foreach (var i in data)
        {
            j++;
            chartData[j] = new object[] { i.Product_Category, i.RevenueAmount };
        }return chartData;
    }

and the javascript code is:

        <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!-- Javascript Job-->
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
    var chartData; // globar variable for hold chart data
    google.load("visualization", "1", { packages: ["corechart"] });

    // Here We will fill chartData

    $(document).ready(function () {

        $.ajax({
            url: "GoogleChart.aspx/GetChartData",
            data: "",
            dataType: "json",
            type: "post",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                chartData = data.d;
                alert(chartData);
            },
            error: function () {
                alert("Error loading data! Please try again.");
            }
        }).done(function () {
            // after complete loading data
            google.setOnLoadCallback(drawChart);
            drawChart();
        });
    });


    function drawChart() {
        var data = google.visualization.arrayToDataTable(chartData);

        var options = {
            title: "Company Revenue",
            pointSize: 5
        };

        var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
        pieChart.draw(data, options);

    }

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

Database is in picture

PLEASE HELP!! how to get my table data in ajax and put them in chart?

解决方案

first, recommend not using jsapi to load the library, according to release notes...

<script src="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

as seen above, the callback can be set in the load statement

the callback will let you know when google charts has loaded, along with the dom

thus no need for setOnLoadCallback or $(document).ready

as for the rest, recommend the following setup...

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!-- Javascript Job-->
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', {
      callback: drawChart,
      packages: ['corechart']
    });

    function drawChart() {
      $.ajax({
        url: "GoogleChart.aspx/GetChartData",
        data: "",
        dataType: "json",
        type: "post",
        contentType: "application/json; charset=utf-8",
      }).done(function (data) {
        var data = google.visualization.arrayToDataTable(data.d);
        var options = {
          title: "Company Revenue",
          pointSize: 5
        };
        var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
        pieChart.draw(data, options);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log("Error: " + errorThrown);
      });
    }
</script>
<div id="chart" style="width: 500px; height: 400px">
</div>

这篇关于Javascript ajax从C＃中获取数据未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！