Как динамически загрузить данные из таблицы сетки в круговую диаграмму Google в MVC C#? - PullRequest
Новая
       31

Как динамически загрузить данные из таблицы сетки в круговую диаграмму Google в MVC C#?

0 голосов
/ 27 февраля 2020

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

это мой код IndexView на случай, если он немного поможет 



    @model List

        @{
            Layout = null;
            WebGrid webGrid = new WebGrid(source: Model, canSort: false, rowsPerPage: 5);
        }

        

        
        
            
            Index
            
        
            @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "WebGridForm" }))
            {
                Customer Name: @Html.TextBox("CustomerName")
                
            }
            <br />
            @webGrid.GetHtml(
                htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
                columns: webGrid.Columns(
                         webGrid.Column("CustomerID", "Customer Id"),
                         webGrid.Column("ContactName", "Customer Name"),
                         webGrid.Column("City", "City"),
                         webGrid.Column("Country", "Country")

            ))

            There are:
            @{

                var grid = webGrid.TotalRowCount;
                @Html.Label(grid.ToString());
            }
          
            
            
                $("body").on("click", ".Grid tfoot a", function () {
                    $('#WebGridForm').attr('action', $(this).attr('href')).submit();
                    return false;
                });
            
            @if (Model.Count == 0)
            {
                
                    $(function () {
                        var row = $("#WebGrid")[0].insertRow(-1);
                        var cell = $(row.insertCell(-1));
                        cell.html("No records found.");
                        cell.attr("colspan", "4").attr("align", "center");
                    });
                
            }
            
            
                    // Load google charts
                    google.charts.load('current', { 'packages': ['corechart'] });
                    google.charts.setOnLoadCallback(drawChart);

                    // Draw the chart and set the chart values

                    function drawChart() {

                        var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],

                            ['City', 8],
                            ['Country', 2]
                        ]);

                        // Optional; add a title and set the width and height of the chart
                        var options = { 'title': 'My Average Day', 'width': 550, 'height': 400 };

                        // Display the chart inside the  element with id="piechart"
                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                        chart.draw(data, options);
                    }
    }

Есть идеи? Спасибо!

...