我想将数据表转换为可以输入到.Net MVC应用程序中的Google Charts的格式。我从数据库中检索数据并将其放在C＃数据表中。现在，我想将其转换为Google图表可以理解的格式。我已经包含了到目前为止的代码。我不断从Google图表中收到错误消息：“第一行不是数组。”：]
//Controller
public static string GetData()
{
String sql = "Select * from someTable";
//Run above sql against database and get back a DataTable
DataTable dt = new Utility().ConnectionUtility(sql);
//Convert DataTable to Json Object (I followed this link: https://codepedia.info/convert-datatable-to-json-in-asp-net-c-sharp/)
return JsonConvert.SerializeObject(dt);
}
//View
<div id="barChart" style="width:750px; height: 400px;"></div>
<script>
// Here We will fill chartData
$(document).ready(function () {
$.ajax({
url: "GetData",
dataType: "json",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data;
},
error: function (xhr, status, error) {
alert('Message');
}
}).done(function () {
// after complete loading data
google.setOnLoadCallback(drawChart);
drawChart();
});
});
function drawChart() {
var datapie = google.visualization.arrayToDataTable(chartData);
var options = {
title: "Test Execution",
width: 600,
height: 400,
bar: { groupWidth: "75%" },
};
var Chartpie = new google.visualization.BarChart(document.getElementById('barChart'));
Chartpie.draw(datapie, options);
}
</script>
也许已经有点晚了，但是今天我遇到了同样的情况。
在控制器端，您需要根据图表类型来调整数据形状。然后从您的角度来看，只需使用google.visualization.arrayToDataTable（Your Data）;这是示例代码...
[HttpPost]
public JsonResult AjaxMethod()
{
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"HEADER1", "HEADER_NUMERIC_AREA"
});
//get data table from sql.
DataTable DT = Direkbaglan.DBListele(" SELECT [StockName] ,[Weight] FROM STOCKS ");
for (int i = 0; i < DT.Rows.Count; i++)
{
chartData.Add(new object[]
{
DT.Rows[i][0], DT.Rows[i][1]
});
}
return Json(DT);
}
查看侧
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "/Home/jsongonder",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r);
//Pie
var options = {
title: 'Stock Info (weight)'
};
var chart = new google.visualization.PieChart($("#chart1")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart1" style="width: 500px; height: 400px;">
</div>
</body>
</html>