Question

我在MVC项目中有一个控制器操作，该操作创建带有所需组件的json记录。可以了我遇到的问题是将其带入chart.js画布。这将是一个饼图，显示所有相关国家，并分别进行计数。杰森有此信息。最初这是设置为使用Google可视化，但我想使用chart.js。我刚开始使用它。用静态数据创建图表没有问题，但是我正在从SQL表中提取信息并创建一个要读取的json。

我尝试使用相同的结构并调用数据：data []，但是它不起作用，我也尝试了数据：getData，它是ajax函数的var。我正在刷新每个议会的数据。

这是我的控制器动作

        public ActionResult CustomersByCountry()
    {
        CustomerEntities _context = new CustomerEntities();

        var customerByCountry = (from c in _context.Addresses
                                 group c by c.Country into g
                                 orderby g.Count() descending
                                 select new
                                 {
                                     Country = g.Key,
                                     CountCustomer = g.Count()
                                 }).ToList();

        return Json(new { result = customerByCountry }, JsonRequestBehavior.AllowGet);
    }

这是JavaScript / ajax-与其他图表一起嵌套在document.ready函数中。

编辑-更改了Ajax-仍然无法运行

OrdersByCountry()

    function OrdersByCountry() {
        $.ajax({
            url: '/admin/CustomersByCountry',
            method: "GET",
            dataType: "json",
            error: function (_, err) {
                console.log(_, err)
            },
            success: function (data) {
                console.log (data);
                var customer = $("#customerByCountryPieChart").get(0).getContext("2d");
                console.log(customer)
                var cpieChart = new Chart(customer, {
                    type: 'pie',
                    data: data,
                    options: {
                        responsive: true,
                        title: {
                            display: true,
                            text: "Customers By Country",
                        }
                    }
                });
            }
        });
    };

编辑-现在可以使用的代码如下。

我将其更改为获取州而不是国家，只是为了消除可能的混乱。在这一点上，让国家而不是国家对我来说更有意义。这有效-表示显示图形，我仍然需要处理标签等。

        OrdersByStates()

    function OrdersByStates() {

        $.ajax({
            url: '@Url.Action("CustomersByStates", "Admin")',
            data: JSON,
            contentType: "application/json; charset=utf-8",
            method: "get",
            dataType: "json",
            error: function (_, err) {
                console.log(_, err)
            },
            success: function (response) {
                console.log(response);
                var jsonresult = response

                var labels = jsonresult.result.map(function (e) {
                    return e.State;
                });
                var data = jsonresult.result.map(function (e) {
                    return e.CountCustomer;
                });;

                var ctx = document.getElementById("CustomerByStatePieChart").getContext("2d");
                var cpieChart = new Chart(ctx, {
                    type: 'pie',
                    data:
                    {
                        datasets: [
                            {
                                backgroundColor: ["#46BFBD", "#F7464A"],
                                hoverBackgroundColor: ["#5AD3D1", "#FF5A5E"],
                                label: "Orders",
                                data: data,
                            }]
                    },
                    options: {
                        responsive: true,
                        title: {
                            display: true,
                            text: "Customers By Country",
                        }
                    }
                });

            }
        });
    };

});

Answer 1

尝试：

var cpieChart =新图表（客户，{ 类型：“派”，数据：data.result，选项：{ 响应式的：是的，标题：{ 显示：true，文字：“按国家/地区分类的客户”， } } }）;

服务器“ data”变量对您的请求的响应为{结果：LIST}

如何正确编写Javascript / Ajax以便与Chart.js一起使用

1 个答案: