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

Question

我正在尝试使用一些简洁的图表来测试google api，但效果很好。 但是，当我试图用TreeMap显示相同的数据时，它将无法工作。 不断收到错误消息：第1列必须为字符串类型。我不知道为什么这适用于图表而不适用于树形图？

这可能是很多代码，但是很简单，我不确定在这里需要显示哪些部分，因此我将全部显示。

这是一个带有Company属性的简单类：

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的Google Treemap图表的数据格式来匹配您的情况：

              ['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的格式，所以其他图表将中断。