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

Question

我正在尝试谷歌API与一些整洁的图表至极，工作正常。但是当我尝试用TreeMap显示相同的数据时，它将不起作用。继续收到错误说：第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的格式，你的其他图表将打破。