使用数据库中的 Ajax 填充 Google 图表答案

【问题标题】：Filling Google Chart with Ajax from a database使用数据库中的 Ajax 填充 Google 图表
【发布时间】：2018-02-02 10:34:26
【问题描述】：

我试图获取一个谷歌条形图以从一个简单的数据库中获取两个值并显示在图表中。我可以显示数组中的值，但是当我尝试使用 ajax 从数据库中获取数据时，它不会获取值。（我能够打印索引中的值）。

注意：嘿，我正在尝试熟悉 javascript 并使用谷歌图表。我查找了几乎所有我能找到的东西，但我仍然无法解决我的问题。这是我对stackoverflow的第一个问题。请帮忙。

我有一个简单的数据库，其中仅包含 4 个值，代表公司 12 个月内的 cashIn 和 cashOut。

我创建了一个 MVC Web 应用程序，然后将数据库添加到其中。这是控制器类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication2.Models;

namespace WebApplication2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            DenemeDataEntities db= new DenemeDataEntities();

            List<GelirGider > gelirList = db.GelirGiders.ToList();
            Array gelirArray = db.GelirGiders.ToArray();

            //return Json(gelirList, JsonRequestBehavior.AllowGet);
            //return Json(gelirList, JsonRequestBehavior.AllowGet);
            return View(gelirList);
        }

        public ActionResult Index2()
        {
            DenemeDataEntities db = new DenemeDataEntities();

            List<GelirGider> gelirList = db.GelirGiders.ToList();
            //Array gelirArray = db.GelirGiders.ToArray();


           return Json(gelirList, JsonRequestBehavior.AllowGet);
            //return View(gelirList);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

这里是索引视图类

@{
    ViewBag.Title = "Home Page";
}
@using WebApplication2.Models;
@model List<GelirGider>



<html>
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        // Load the Visualization API and the corechart package.
        google.charts.load('current', { 'packages': ['corechart'] });

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Ay');
            data.addColumn('number', 'Gelir');
           

            $.ajax({
                url: '/Home/Index2',
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    alert('asdasda');
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Ay');
                    data.addColumn('number', 'Gelir');
                    
                    $.each(data, function (i, item) {
                        data.addRows([ item.Ay ,item.Gelir])
                        //data.addRows(eval('[' + item.Ay + ', ' + item.Gelir ']'));
//                        data.addRows([ ['Mushrooms', 3], ]);
                    });
                    
             

                    // Set chart options
                    var options = {
                        'title': 'How Much Pizza I Ate Last Night',
                        'width': 400,
                        'height': 300
                    };

                    // Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                    chart.draw(data, options);

                }

            });


         
        }
    </script>
</head>

<body>
    <!--Div that will hold the pie chart-->
    

    <div class="jumbotron">
        <h1>Gelir Gider Tablosu</h1>
        <button onclick="drawChart();">bilgileri goster</button>
    </div>
    <div id="chart_div"></div>
</body>
</html>

我相信这条线不能取数据，因此不能把数据放到图表中。我尝试了一些其他组合以防出现简单的缩进错误，但又没有奏效 data.addRows([ item.Ay ,item.Gelir])

请帮忙。我尽量说清楚。提前致谢

【问题讨论】：

这是您真实完整的代码吗？因为我在这里没有看到任何 jquery。
这是真正的代码，但不是全部。主要取自谷歌图表网站。我还应该在这里添加什么？

标签： javascript html ajax asp.net-mvc

【解决方案1】：

您的代码中似乎有几个问题：

对 Ajax 响应对象和 google 图表数据对象使用相同的名称。
Google Charts Datatable.AddRows() 方法接收数组对象数组，但不接受单个数组。
您再次在每个语句中使用新创建的谷歌图表数据表

我已经根据前面的几点更新了你的 Ajax 代码：

            $.ajax({
                url: '/Home/Index2',
                type: 'POST',
                dataType: 'json',
                success: function (response) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Ay');
                    data.addColumn('number', 'Gelir');
                    var arr = [];
                    $.each(response, function (i, item) {
                        arr.push([ item.Ay ,item.Gelir]);
                    });
                    data.addRows(arr);
                    // Set chart options
                    var options = {
                        'title': 'How Much Pizza I Ate Last Night',
                        'width': 400,
                        'height': 300
                    };
                    // Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                }
            });

【讨论】：

非常感谢。显然 data.addRows();不会一一添加每一行，而是同时添加所有行。将所有数据放入数组数组，然后在调用 data.addRows() 时使用该数组。更正了其他错误。现在谷歌图表从数据库中获取数据并正确显示