Google 饼图添加行 - 饼图未呈现
Google pie charts add rows - pie chart didn't rendered
我在 asp.netcore 中有这个 JS 文件。我正在尝试从我的数据库生成饼图,但只有 1 行数据。我没有收到任何错误,但只呈现标题而不是饼图。
我的 JS 代码
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: '/Index?handler=GlobalChartData',
dataType: 'json',
contentType: 'application/json',
type: 'GET',
success: MyChart
});
function MyChart(globalData) {
var data = new google.visualization.DataTable(globalData);
data.addColumn('string', 'GlobalCases');
data.addColumn('number', 'Data');
data.addRows([
['NewConfirmed', globalData.NewConfirmed],
['NewDeaths', globalData.NewDeaths],
['NewRecovered', globalData.NewRecovered],
['TotalConfirmed', globalData.TotalConfirmed],
['TotalDeaths', globalData.TotalDeaths],
['TotalRecovered', globalData.TotalRecovered]
]);
var options = { 'title': 'Global Covid Data' };
var chart = new google.visualization.PieChart(document.getElementById('ChartForGlobal'));
chart.draw(data, options);
};
}
我的 C# 代码
public JsonResult OnGetGlobalChartData()
{
var globalData = _context.GlobalContexts.ToList();
return new JsonResult(globalData);
}
编辑:
在添加行中,globalData.NewConfirmed -> NewConfirmed 未定义,其他行也是如此。
我将我的添加行更改为
for (var i = 0; i < globalData.length; i++)
{
data.addRows([
['NewConfirmed', Number(globalData[i].NewConfirmed)],
['NewDeaths', Number(globalData[i].NewDeaths)],
['NewRecovered', Number(globalData[i].NewRecovered)],
['TotalConfirmed', Number(globalData[i].TotalConfirmed)],
['TotalDeaths', Number(globalData[i].TotalDeaths)],
['TotalRecovered', Number(globalData[i].TotalRecovered)]
]);
}
现在我的图表已经生成了。
谢谢@Swati。
我在 asp.netcore 中有这个 JS 文件。我正在尝试从我的数据库生成饼图,但只有 1 行数据。我没有收到任何错误,但只呈现标题而不是饼图。 我的 JS 代码
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: '/Index?handler=GlobalChartData',
dataType: 'json',
contentType: 'application/json',
type: 'GET',
success: MyChart
});
function MyChart(globalData) {
var data = new google.visualization.DataTable(globalData);
data.addColumn('string', 'GlobalCases');
data.addColumn('number', 'Data');
data.addRows([
['NewConfirmed', globalData.NewConfirmed],
['NewDeaths', globalData.NewDeaths],
['NewRecovered', globalData.NewRecovered],
['TotalConfirmed', globalData.TotalConfirmed],
['TotalDeaths', globalData.TotalDeaths],
['TotalRecovered', globalData.TotalRecovered]
]);
var options = { 'title': 'Global Covid Data' };
var chart = new google.visualization.PieChart(document.getElementById('ChartForGlobal'));
chart.draw(data, options);
};
}
我的 C# 代码
public JsonResult OnGetGlobalChartData()
{
var globalData = _context.GlobalContexts.ToList();
return new JsonResult(globalData);
}
编辑: 在添加行中,globalData.NewConfirmed -> NewConfirmed 未定义,其他行也是如此。
我将我的添加行更改为
for (var i = 0; i < globalData.length; i++)
{
data.addRows([
['NewConfirmed', Number(globalData[i].NewConfirmed)],
['NewDeaths', Number(globalData[i].NewDeaths)],
['NewRecovered', Number(globalData[i].NewRecovered)],
['TotalConfirmed', Number(globalData[i].TotalConfirmed)],
['TotalDeaths', Number(globalData[i].TotalDeaths)],
['TotalRecovered', Number(globalData[i].TotalRecovered)]
]);
}
现在我的图表已经生成了。 谢谢@Swati。