英文:
How to implement Chart.js in ASP.NET Core MVC properly?
问题
以下是翻译的代码部分：
我正在处理一个关于我的 Twilio 帐户的项目。我想从我的控制台获取所有的出站呼叫，并在使用 Chart.js 库绘制的圆环图上显示它们的状态（已完成、未接听、忙线、失败）。在调试运行时，所有数据都能正确检索。唯一的问题是图表显示。
public async Task<IActionResult> GetAllCalls()
{
List<string> status = new List<string>();
ReceivedCallModel model = new ReceivedCallModel();
var request = new HttpRequestMessage(HttpMethod.Get, $"https://api.twilio.com/2010-04-01/Accounts/{Account_Sid}/Calls.json?StartTime=2023-06-22");
var client = _httpClientFactory.CreateClient("MyClient");
HttpResponseMessage response = await client.SendAsync(request);
if(response.StatusCode == HttpStatusCode.OK)
{
var jsonString = await response.Content.ReadAsStringAsync();
model = JsonConvert.DeserializeObject<ReceivedCallModel>(jsonString);
foreach(var call in model.calls)
{
if(call.direction == "outbound-api")
{
status.Add(call.status);
ViewBag.States = status;
}
}
TempData["success"] = "Successful";
}
return View(model);
}
@model ReceivedCallModel
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="card border-0">
<div class="card-body">
<canvas id="chart">
</canvas>
</div>
</div>
</div>
</div>
</div>
@section Scripts{
<script type="text/javascript">
var canvaschart = document.getElementById("chart");
var completed = [];
var no_answer = [];
var busy = [];
var failed = [];
@if(TempData["success"] != null){
foreach(var item in ViewBag.States){
if(item == "completed"){
@: completed.push(@item);
}
else if(item == "no-answer"){
@: no_answer.push(@item);
}
else if(item == "busy"){
@: busy.push(@item);
}
else if(item == "failed"){
@: failed.push(@item);
}
}
}
const data = {
labels: [
'completed',
'no-answer',
'busy',
'failed'
],
datasets: [{
label: 'Call Status',
data: [completed.length, no_answer.length, busy.length, failed.length],
backgroundColor: [
'rgb(20, 205, 86)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(255,0,0)'
],
hoverOffset: 4
}]
};
var barchart = new Chart(canvaschart, {
type: 'doughnut',
data: data
});
</script>
}
这些是代码部分的翻译。如果需要进一步的帮助，请随时提出。
英文:
I'm working on a project regarding my account on Twilio. I want to get all the outbound calls from my console and show their status (completed, no-answer, busy, failed) on a doughnut chart using Chart.js library. All the data are retrieved correctly on running a debug. The only problem is with showing the chart.
public async Task<IActionResult> GetAllCalls()
{
List<string> status = new List<string>();
ReceivedCallModel model = new ReceivedCallModel();
var request = new HttpRequestMessage(HttpMethod.Get, $"https://api.twilio.com/2010-04-01/Accounts/{Account_Sid}/Calls.json?StartTime=2023-06-22");
var client = _httpClientFactory.CreateClient("MyClient");
HttpResponseMessage response = await client.SendAsync(request);
if(response.StatusCode == HttpStatusCode.OK)
{
var jsonString = await response.Content.ReadAsStringAsync();
model = JsonConvert.DeserializeObject<ReceivedCallModel>(jsonString);
foreach(var call in model.calls)
{
if(call.direction == "outbound-api")
{
status.Add(call.status);
ViewBag.States = status;
}
}
TempData["success"] = "Successful";
}
return View(model);
}
@model ReceivedCallModel
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="card border-0">
<div class="card-body">
<canvas id="chart">
</canvas>
</div>
</div>
</div>
</div>
</div>
@section Scripts{
<script type="text/javascript">
var canvaschart = document.getElementById("chart");
var completed = [];
var no_answer = [];
var busy = [];
var failed = [];
@if(TempData["success"] != null){
foreach(var item in ViewBag.States){
if(item == "completed"){
@: completed.push(@item);
}
else if(item == "no-answer"){
@: no_answer.push(@item);
}
else if(item == "busy"){
@: busy.push(@item);
}
else if(item == "failed"){
@: failed.push(@item);
}
}
}
const data = {
labels: [
'completed',
'no-answer',
'busy',
'failed'
],
datasets: [{
label: 'Call Status',
data: [completed.length, no_answer.length, busy.length, failed.length],
backgroundColor: [
'rgb(20, 205, 86)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(255,0,0)'
],
hoverOffset: 4
}]
};
var barchart = new Chart(canvaschart, {
type: 'doughnut',
data: data
});
</script>
}
It shows the TempData value successfully without showing the chart.
答案1
得分: 1
你可以打开开发者工具，你应该会看到这个错误：
这是因为你在js中调用了C#的代码，实际上在数组中填充的是一个变量，而不是一个字符串：
你可以添加引号将其转换为字符串：
@if (TempData["success"] != null)
{
foreach (var item in ViewBag.States)
{
if (item == "completed")
{
@:completed.push('@item');
}
else if (item == "no-answer")
{
@:no_answer.push('@item');
}
else if (item == "busy")
{
@:busy.push('@item');
}
else if (item == "failed")
{
@:failed.push('@item');
}
}
}
测试结果：
英文:
You can open the developer tools and you should see this error:
This is because you call the code of C# in js, what you actually fill in the array is a variable, not a string:
You can add quotes to convert it to a string:
@if (TempData["success"] != null)
{
foreach (var item in ViewBag.States)
{
if (item == "completed")
{
@:completed.push('@item');
}
else if (item == "no-answer")
{
@:no_answer.push('@item');
}
else if (item == "busy")
{
@:busy.push('@item');
}
else if (item == "failed")
{
@:failed.push('@item');
}
}
}
Test Result:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论