0

我正在尝试将查询绑定到谷歌图表，但我遇到了如下所示的问题。我是 asp.net 核心的新手，所以当我尝试使用谷歌图表时，我遇到了这个问题，下面是我的代码，请提供任何帮助或您建议我使用的任何其他免费图表

大家好，我正在尝试将查询绑定到谷歌图表，但我遇到了如下所示的问题。我是 asp.net 核心的新手，所以当我尝试使用谷歌图表时，我遇到了这个问题，下面是我的代码，请提供任何帮助或您建议我使用的任何其他免费图表

 public JsonResult AjaxMethod(IConfiguration config)
        {

            string query = "select [UserId], count([ServiceOrderNumber]) as ServiceOrders from [dbo].[ServiceOrders] group by [UserId] order by count ([ServiceOrderNumber]) desc";

            string constr = this.configuration.GetConnectionString("DefaultConnection");

            List<object> chartData = new List<object>();
            chartData.Add(new object[]
                            {
                            "[UserId]", "[ServiceOrders]"
                            });
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            chartData.Add(new object[]
                            {
                            sdr["[UserId]"], sdr["[ServiceOrders]"]
                            });
                        }
                    }

                    con.Close();
                }
            }

            return Json(chartData);
        }

这是我的观点

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "/Reports/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);

                    //Pie
                    var options = {
                        title: 'USA City Distribution'
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 500px; height: 400px;">
    </div>
</body>
</html>
4

1 回答 1

1 
public JsonResult AjaxMethod(IConfiguration config)

500 错误与 AjaxMethtod 参数有关：IConfiguration config. 从您的代码中，您似乎想通过 IConfiguration 获取连接字符串，在这种情况下，您可以使用构造函数注入来解析 IConfiguration，而不是将其作为参数传输。因此，请尝试将其从 AjaxMethod 中删除。

示例代码如下：

public class ReportsController : Controller
{
    private readonly ApplicationDbContext _context;
    //Required using Microsoft.Extensions.Configuration;
    private readonly IConfiguration _configuration;
    public ReportsController(ApplicationDbContext context, IConfiguration configuration)
    {
        _context = context;
        _configuration = configuration;
    }

    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult AjaxMethod()
    {
        var conectionstring = this._configuration.GetConnectionString("DefaultConnection");
        List<object> chartData = new List<object>();
        chartData.Add(new object[]
                        {
                        "[UserId]", "[ServiceOrders]"
                        });
         
        //based on the connection string to query database and get data.
        for (int i = 1; i < 10; i++)
        {
            chartData.Add(new object[]
                        {
                         new Guid(), i
                        });
        }
        return Json(chartData);
    }
}

索引视图页面中的代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "/Reports/AjaxMethod",
                //contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);

                    //Pie
                    var options = {
                        title: 'USA City Distribution'
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            }); 
        }
</script>
<div id="chart" style="width: 500px; height: 400px;">
</div>

然后，调试 Web 应用程序，截图如下：

在此处输入图像描述

于 2021-03-09T07:59:39.047 回答