Javascript ajax 从 C# 获取未定义的数据

Question

我想用谷歌图表构建一个网页。我尝试使用 c# 将其构建为 Web 表单，并将数据从本地数据库获取到 javascript。但这不起作用，我的数据在 ajax 的响应中未定义。 这是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;
    }

而javascript代码是：

        <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

请帮忙！！如何在ajax中获取我的表格数据并将它们放入图表中？

Answer 1

首先，推荐不使用jsapi加载库，根据release notes...

通过jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic 加载程序 (loader.js)。

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

这只会改变load 语句...

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

如上所示，callback 可以在load 语句中设置

callback 会在加载谷歌图表时通知您，连同 dom

因此不需要setOnLoadCallback 或$(document).ready

至于其他，推荐如下设置...

<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>