Как динамически записывать имена по оси X в ASP.NET MVC Chart.js ⇐ Jquery

[Anonymous]

Я работаю над проектом по созданию гистограмм, где по оси X мы динамически отображаем имена агентов и соответствующий статус сделки.
Итак, в гистограмме мы вызываем данные из базы данных и отобразите значения на гистограмме. До сих пор мне удавалось успешно вызывать первый набор данных: «Сделки открыты», «В процессе» и «Отмена». Однако проблема, с которой я столкнулся, связана с динамической передачей имени агента по оси X.
В приведенном ниже коде я просто жестко запрограммировал имена, но хочу, чтобы они могли отображаться из db и не жестко закодирован, а также должен отображать соответствующие предложения агентов.
Вот мой код:

Код: Выделить всё

public class ReportVM
{
public string AgentName { get; set; }

public int OpenClient { get; set; }
public int ClosedClient { get; set; }
public int InProgressClient { get; set; }
public int CancelClient { get; set; }
}

Контроллер, в котором я храню список в ViewBag:

Код: Выделить всё

var thisWeekAgentPerform = db.Clients.Where(x => DbFunctions.TruncateTime(x.CleitnCreatedDate) >= thisWeekMonday
&& DbFunctions.TruncateTime(x.CleitnCreatedDate)  c.AgentUname //this AgentName is from Client Model Class
).Select(b => new ReportVM()
{
AgentName = b.Key, //this AgnetName is from Report VM
OpenClient= b.Count(),
ClosedClient = b.Count(),
InProgressClient = b.Count()
}).ToList();
ViewBag.AgentThisWeekPerform = thisWeekAgentPerform;

Просмотр

Код: Выделить всё

jQuery

Код: Выделить всё

var barCanvas = document.getElementById("barchart");
debugger;

var OpenClient = [];//these are all javascript array variables

var ClosedClient = [];
var InProgressClient = [];
var AgentName = []

@if (ViewBag.AgentThisWeekPerform.Count > 0)
{
foreach (var item in ViewBag.AgentThisWeekPerform)
{
@:OpenClient.push(@item.OpenClient);
@:ClosedClient.push(@item.ClosedClient);
@:InProgressClient.push(@item.InProgressClient);
@:AgentName.push(@item.AgentName);
}
}

var OpenClient = {
label: 'OpenClient',
data: OpenClient,
backgroundColor: 'rgb(255, 99, 132)',
borderWidth: 0,
lineTension: 0,
};
var ClosedClient = {
label: 'ClosedClient',
data: ClosedClient,
backgroundColor: 'rgb(54, 162, 235)',
borderWidth: 0,
};

var InProgressClient = {
label: 'InProgressClient',
data: InProgressClient,
backgroundColor: 'rgb(157, 230, 41)',
borderWidth: 0,
};

var datasetvalues = {
labels: [AgentName],//x-axis label values (HERE I WANT TO PASS NAMES DYNAMICALLY)
datasets: [OpenClient, ClosedClient, InProgressClient]//y-axis
};

var chartOptions = {
scales: {
xAxes: [{
barPercentage: 1,//Percent (0-1) of the available width each bar should
categoryPercentage: 0.6,//Percent (0-1) of the available width each category
}],
yAxes: [{
barPercentage: 1,
categoryPercentage: 0.6,
ticks: {
beginAtZero: true
}
}],
}
};

var barChart = new Chart(barCanvas, {
type: 'bar',
data: datasetvalues,
options: chartOptions
});

Заранее спасибо.

Заранее спасибо.

Заранее благодарю.

Заранее благодарим.

п>

Подробнее здесь: https://stackoverflow.com/questions/789 ... c-chart-js