JavaScript Ajax从C＃获取数据不确定

Question

我想用Google图表构建一个网页。我试图将其用作网络表单构建，并将数据从本地数据库获取到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>

数据库在图片中

请帮忙！如何将我的表数据放在Ajax中并将其放入图表？

Answer 1

首先，推荐不要使用 jsapi加载库，根据发行说明...

通过jsapi加载程序可用的Google图表版本不再始终如一地更新。从现在开始，请使用新的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将在Google图表加载时让您知道，以及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>