Блог

Попытка реализовать Google Chart с ASP.Net ЯДРО MVC. Занимаюсь этим уже два дня, но не могу понять свою ошибку. Я не получаю сообщение об ошибке, и я вижу массив в консоли, но нет данных.

VIEWMODEL

     public class ZipCodes
{
    public string ZipCode { get; set; }
    public int ZipCount { get; set; }

}
  

КОНТРОЛЛЕР

         public ActionResult IncidentsByZipCode()
    {
        var incidentsByZipCode = (from o in _context.Incident
                                   group o by o.ZipCode into g
                                   orderby g.Count() descending
                                   select new
                                   {
                                       ZipCode = g.Key,
                                       ZipCount = g.Count()
                                   }).ToList();

        return Json(incidentsByZipCode);
    }
  

Вид

         function IncidentsByZipCode() {

    $.ajax({
        type: 'GET',
        url: '@Url.Action("IncidentsByZipCode", "Controller")',
        success: function (response) {
            console.log(response);

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'ZipCode');
            data.addColumn('number', 'ZipCount');

            for (var i = 0; i < response.result.length; i  ) {
                data.addRow([response.result[i].ZipCode, response.result[i].ZipCount]);
            }

            var chart = new google.visualization.ColumnChart(document.getElementById('incidentsByZipCode'));

            chart.draw(data,
                {
                    title: "",
                    position: "top",
                    fontsize: "14px",
                    chartArea: { width: '100%' },
                });
        },
        error: function () {
            alert("Error loading data!");
        }
    });
}
  

Поскольку используемый вами API не является столбчатой диаграммой, данные не могут быть добавлены и отображены правильно. Согласно официальному примеру, вам необходимо внести некоторые изменения.

Вот код ajax.

 <script>
//Generate random colors
function bg() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb("   r   ','   g   ','   b   ")";
}
    function IncidentsByZipCode() {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("IncidentsByZipCode","home")',
            success: function (response) {
                google.charts.load('current', { packages: ['corechart'] });
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = new google.visualization.DataTable();
                    var obj = [
                        ["Element", "Density", { role: "style" }],
                    ];
                    $.each(response, function (index, value) {
                        obj.push([value.zipCode, value.zipCount, bg()])
                    })
                    var data = google.visualization.arrayToDataTable(obj);//This is method of Column Chart 
                    var view = new google.visualization.DataView(data);
                    view.setColumns([0, 1,
                        {
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation"
                        },
                        2]);
                    var chart = new google.visualization.ColumnChart(document.getElementById('incidentsByZipCode'));
                    chart.draw(data,
                        {
                            title: "",
                            position: "top",
                            fontsize: "14px",
                            chartArea: { width: '100%' },
                        });
                }
            },
            error: function () {
                alert("Error loading data!");
            }
        });
    }
    IncidentsByZipCode()
  

Это контроллер.

 public ActionResult IncidentsByZipCode()
    {
        //var incidentsByZipCode = (from o in _context.Incident
        //                          group o by o.ZipCode into g
        //                          orderby g.Count() descending
        //                          select new
        //                          {
        //                              ZipCode = g.Key,
        //                              ZipCount = g.Count()
        //                          }).ToList();
        var incidentsByZipCode = new List<ZipCodes>
        {
            new ZipCodes{ ZipCode="code1", ZipCount=3},
            new ZipCodes{ZipCode="code2",ZipCount=4},
            new ZipCodes{ZipCode="code3",ZipCount=2},
            new ZipCodes{ZipCode="code4",ZipCount=9},
        };
        return Json(incidentsByZipCode);
    }
  

Результат, и вы также можете обратиться к этому документу

.