我正在尝试使用 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
我做错了什么?
最佳答案
我认为问题出在第一个列表上,您可以尝试使用父类封装结果:
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]]}
关于c# - 谷歌图表和 asp.net MVC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49488270/