c# - 谷歌图表和 asp.net MVC

Question

我正在尝试使用 Google Charts 和 Asp.net Controller 提供的数据创建一个简单的图表。

这是 Controller Action :

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>

但是当我运行它时，我只是得到 Table has no columns

我做错了什么？

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]]}