Google Charts and asp.net MVC

Question

我正在尝试使用ASP.NET控制器提供的Google图表和数据创建一个简单的图表。

这是控制器动作：

public JsonResult HierachyChart(int id)
    {
        List<object> rows = new List<object>
        {
            new{ cols =  new object[] { "Employee Name", "Salary" }},
            new {rows =  new object[]
            {
                new object[] { "Bob", 35000 },
            new object[] { "Alice", 44000 },
            new object[] { "Frank", 27000 },
            new object[] { "Floyd", 92000 },
            new object[] { "Fritz", 18500 }
                }
        }};
        return this.Json(rows, JsonRequestBehavior.AllowGet);
    }

似乎很简单，我可以在运行时返回并返回：

[{"cols":["Employee Name","Salary"]},
 {"rows":[["Bob",35000],["Alice",44000],["Frank",27000],["Floyd",92000],["Fritz",18500]]}]

未经训练的眼睛似乎是正确的格式？

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var jsonData = $.ajax({
            url: '@Url.Action("HierachyChart", "JobHierachy", new { Id = 1538 })',
            dataType: "json",
            async: false
        }).responseText;
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240});
    }
</script>

但是当i运行时，我只是得到表没有列

我在做什么错？

Answer 1

我认为问题是第一个列表，您可以尝试使用父类封装结果：

public class HierarchyChart
{
    public object[] cols { get; set; }
    public object[] rows { get; set; }
}
public JsonResult HierachyChart(int id)
{
    var hierarchyChart = new HierarchyChart();
    hierarchyChart.cols = new object[] { "Employee Name", "Salary" }
    hierarchyChart.rows = new object[] {
        new object[] { "Bob", 35000 },
        new object[] { "Alice", 44000 },
        new object[] { "Frank", 27000 },
        new object[] { "Floyd", 92000 },
        new object[] { "Fritz", 18500 }
    };
    return this.Json(hierarchyChart , JsonRequestBehavior.AllowGet);
}

这是现在的输出：

{"cols":["Employee Name","Salary"],"rows":[["Bob",35000],["Alice",44000],["Frank",27000],
    ["Floyd",92000],["Fritz",18500]]}

Answer 2

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <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.
            $.ajax({
                type: "POST",
                url: "Googlechart.aspx/GetChartData",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var chartdata = new google.visualization.DataTable();
                    chartdata.addColumn('string', 'Date');
                    chartdata.addColumn('number', 'Sales Amount');
                    chartdata.addRows( r.d);
                    var options = {'title':'Date Wise Sales Summary',
                        'width':1000,
                        'height': 500
                    };// Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                    chart.draw(chartdata, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>

参考for-https：//aspguru.online/how-to-to-create-google-charts-in-asp-net.html

Answer 3

建立@isma所说的内容，我终于通过指定这样的值来工作：

        public class HierarchyChart
    {
        public object[] cols { get; set; }
        public object[] rows { get; set; }
    }
    public JsonResult HierachyChart(int id)
    {
        var hierarchyChart = new HierarchyChart
        {
            cols = new object[]
            {
                new { id = "task", type = "string", label = "Employee Name" },
                new { id = "startDate", type = "date", label = "Start Date" }
            },
            rows = new object[]
            {
                new { c = new object[] { new { v = "Bob" }, new { v = 35000 } } },
                new { c = new object[] { new { v = "Alice" }, new { v = 44000 } } },
                new { c = new object[] { new { v = "Frank" }, new { v = 28000 } } },
                new { c = new object[] { new { v = "Floyd" }, new { v = 92000 } } },
                new { c = new object[] { new { v = "Fritz" }, new { v = 18500 } } }
            }
        };
        return this.Json(hierarchyChart, JsonRequestBehavior.AllowGet);
    }

希望可以帮助任何搜索此