如何在 MVC4 中使用 Google JS API 将 C# 中的对象列表显示到 javascript

Question

我正在尝试带有一些整洁图表的谷歌 api，效果很好。但是，当我尝试使用树状图显示相同的数据时，它将不起作用。不断收到错误，指出：第 1 列必须是字符串类型。我不明白为什么这适用于图表而不是树状图？

这可能是很多代码，但它非常简单，我不确定哪些部分是在这里显示的，所以我全部显示。

下面是一个包含公司属性的简单类：

public class Company
{
    public int Expense { get; set; }
    public int Salary { get; set; }
    public string Year { get; set; }
}

下面是提供公司列表并将数据发送到视图的控制器：

public ActionResult GetData()
{
    return Json(CreateCompaniesList(), JsonRequestBehavior.AllowGet);
}
private IEnumerable<Company> CreateCompaniesList()
{
    List<Company> companies = new List<Company>();
    Company company1 = new Company() { Expense = 200, Salary = 1000, Year = new DateTime(2014, 1, 1).ToString("yyyy/mm/dd") };
    Company company2 = new Company() { Expense = 300, Salary = 800, Year = new DateTime(2014, 2, 1).ToString("yyyy/mm/dd") };
    Company company3 = new Company() { Expense = 500, Salary = 1400, Year = new DateTime(2014, 3, 1).ToString("yyyy/mm/dd") };
    companies.Add(company1);
    companies.Add(company2);
    companies.Add(company3);
    return companies;
}

下面是提供图表和树状图的视图：

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" >  
    google.load("visualization", "1", { packages: ["corechart"] });
    google.load("visualization", "1", { packages: ["treemap"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        $.get('/Home/GetData', {},
            function (data) {
                var tdata = new google.visualization.DataTable();
                tdata.addColumn('string', 'Year');
                tdata.addColumn('number', 'Salary');
                tdata.addColumn('number', 'Expense');
                for (var i = 0; i < data.length; i++) {
                    tdata.addRow([data[i].Year, data[i].Salary, data[i].Expense]);
                }
                var options = {
                    title: "Expenses, salary For the current year"
                };
                var chart1 = new google.visualization.AreaChart(document.getElementById('chart_div1'));
                var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
                var chart3 = new google.visualization.PieChart(document.getElementById('chart_div3'));
                var chart4 = new google.visualization.ColumnChart(document.getElementById('chart_div4'));
                var tree = new google.visualization.TreeMap(document.getElementById('tree_div1'));
                //var chart6 = new google.visualization.ControlsandDashboards(document.getElementById('chart_div6'));
                chart1.draw(tdata, options);
                chart2.draw(tdata, options);
                chart3.draw(tdata, options);
                chart4.draw(tdata, options);
                tree.draw(tdata, options);
        });
    }
</script>
<div id="chart_div1" style="width: 900px; height: 500px;">
</div>
<div id="chart_div2" style="width: 900px; height: 500px;">
</div>
<div id="chart_div3" style="width: 900px; height: 500px;">
</div>
<div id="chart_div4" style="width: 900px; height: 500px;">
</div>
<div id="tree_div1" style="width: 900px; height: 500px;">
</div>

图表 1 - 4 按预期工作，"树"出现问题

Answer 1

您需要谷歌树状图的数据格式，例如 bleow 来匹配您的情况：

              ['Year','ParentsYear', 'Expense', 'Salary'],
              ['Years', null, 0, 0],
              ['2014', 'Years', 200, 1000],
              ['2012', 'Years', 300,800],
              ['2013', 'Years', 500,1400]

原因是：

数据表中的每一行描述一个节点（一个矩形 图）。每个节点（根节点除外）都有一个或多个父节点。

要解决您的问题，请按如下所示更改代码：

function drawChart() {
    $.get('/Home/GetData', {},
        function (data) {
            var tdata = new google.visualization.DataTable();
            tdata.addColumn('string', 'Year');
            tdata.addColumn('string', 'ParentsYear');
            tdata.addColumn('number', 'Expense');
            tdata.addColumn('number', 'Salary');
            tdata.addRow(['Years', null, 0, 0]);               
            for (var i = 0; i < data.length; i++)
            {
                tdata.addRow([data[i].Year,"Years",data[i].Salary, data[i].Expense]);
            }
            var tree = new google.visualization.TreeMap(document.getElementById('tree_div1'));
            var options = {
                title: "Expenses, salary For the current year"
            };
            tree.draw(tdata, options);
        });
}

注意：因为它改变了DataTable的格式，您的其他图表将中断。