Question

我正在尝试通过JSON格式将数据从SQL服务器提取到Google图表中，但我收到以下错误

~~未捕获错误：不是数组~~ - 已解决。在编辑中回答以下

未捕获的TypeError：无法读取属性＆＃39; load＆＃39;未定义的

我正在关注此tutorial

chart.aspx中的

JS代码

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

        <script>
            var chartData; // globar variable for hold chart data
            google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawChart);
            // Here We will fill chartData

            $(document).ready(function () {

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

                    drawChart();
                });
            });


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

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

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

            }


</script>
    <script type="text/javascript">
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);

charts.aspx

中的

HTML代码

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

    <div id="chart_div" style="width:500px;height:400px">
                <%-- Here Chart Will Load --%>
            </div>

</asp:Content>

C＃代码 - charts.aspx.cs

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetChartData()
{
    List<Main> data = new List<Main>();
    //Here MyDatabaseEntities  is our dbContext
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        data = dc.Mains.ToList();
    }

    var chartData = new object[data.Count + 1];
    chartData[0] = new object[]{
            "Status",
            "status reason"
        };

    int j = 0;
    foreach (var i in data)
    {
        j++;

        chartData[j] = new object[]
        {
            i.Incident_Status.ToString(), i.Status_Reason.ToString()
        };

        //chartData[j] = new object[] { i.Year.ToString(), i.Electronics, i.BookAndMedia, i.HomeAndKitchen };
    }
    return chartData;
}

JSON输出

{Message: "Authentication failed.", StackTrace: null,…}
ExceptionType: "System.InvalidOperationException"
Message :   "Authentication failed."
StackTrace  :  null

编辑 - 我尝试添加

<authorization>
        <allow users="*" /> 
 </authorization>

web.config中的

因为我遇到了授权错误。但它仍然没有帮助。

EDIT2 - 我在App_Date / RouteConfig.js中添加了

settings.AutoRedirectMode = RedirectMode.Off;

这解决了JSON问题。我现在得到了适当的回应

d: [["Status", "status reason"], ["Closed", "No Further Action Required"],…]}
d: [["Status", "status reason"], ["Closed", "No Further Action Required"],…]

静态数据未加载。

Answer 1

在将参数传递给函数之前，您需要解析JSON：

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

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

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

        }

<强>更新

我只是错了$.parseJSON被弃用并不重要。所以我改变了一下。但我刚刚更改了你的javascript函数。

更新2：

在您的JSCode中：var data = google.visualization.arrayToDataTable(chartData);

修复：var data = google.visualization.arrayToDataTable(JSON.parse(chartData));

未捕获的错误：不是数组ASP.NET

1 个答案: