用數據庫中的Ajax填充谷歌圖表

我試圖讓谷歌條形圖從簡單的數據庫中獲取兩個值並顯示在圖中。我可以顯示數組中的值，但是當我嘗試使用ajax從數據庫獲取數據時，它不會獲取值（我能夠在索引中打印值）。用數據庫中的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]）

請幫忙。我試圖儘可能清楚。在此先感謝

來源

2017-08-24 Furkan Taşkale

這是你的真實和完整的代碼？因爲我沒有在這裏看到任何jQuery。 – Ancient

這是真實的代碼，但不是全部。主要來自谷歌圖表網站。我還應該在這裏添加什麼？ –

看來，你在你的代碼中的幾個問題：

爲Ajax響應對象和谷歌圖表數據對象使用相同的名稱。
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); 
       } 
      });

來源

2017-08-25 12:42:29 iceDragon

非常感謝。 Apperantly data.addRows（）;不會逐一添加每行，但會同時添加所有行。將所有數據獲取到數組數組中，然後在調用data.addRows（）時使用該數組。更正了其他錯誤。現在Google圖表從數據庫中獲取數據並正確顯示 –

用數據庫中的Ajax填充谷歌圖表

回答

相關問題