我仍然是 ASP.NET MVC 的初学者,我为我的一个模型创建了图表并且它起作用了;当我对同一个项目中的另一个模型尝试相同的方法时,它没有用。
控制器(DowntimeController)
using ASPNETPFE.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore.Metadata.Internal;
using System.Linq;
using System.Text.RegularExpressions;
using ASPNETPFE.Models.Domain;
namespace ASPNETPFE.Controllers
{
//for register
[Authorize]
//
public class DowntimeController : Controller
{
private readonly MVCDemoDbContext _context; //_context and context were both simply dbContext
public DowntimeController(MVCDemoDbContext context)
{
this._context = context;
}
public IActionResult IndexDowntime()
{
var result = _context.Trss
.GroupBy(x => x.Reason)
.Select(s => new DowntimeOccurence
{
DowntimeSum = s.Sum(d => d.Downtime),
Reason = s.Key,
Occurence = s.Count()
})
.OrderByDescending(g => g.DowntimeSum)
.ToList();
return View(result);
}
//////for the chart
public IActionResult ShowDdata()
{
return View();
}
[HttpPost]
public List<object> GetDdata()
{
List<object> data = new List<object>();
List<string> labels = _context.Downtime.Select(p => p.Reason).ToList();
data.Add(labels);
List<int> values = _context.Downtime.Select(p => p.Occurence).ToList();
data.Add(values);
return data;
}
}
}
模型:(DowntimeOccurence)
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
public class DowntimeOccurence
{
//
[Key]
public int Idd { get; set; } ///for the charts of downtime
//
public int DowntimeSum { get; set; }
public string Reason { get; set; }
public int Occurence { get; set; }
}
视图(Showddata)
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--<input id="ID" value="Show Graph" type="button" />-->
<!--where we select the type of graph we want-->
<p>
<div class="row">
<div class="col-1">
<label><b>Chart-Type</b></label>
</div>
<div class="col-2">
<select id="ChartType" class="form-control" style="width:150px;">
<option selected>--Select Chart Type--</option>
<option>bar</option>
<option>line</option>
<!--<option>doughnut</option>-->
</select>
</div>
<div class="col-4">
<input id="ID" value="Show Graph" type="button" />
</div>
</div>
</p>
<br />
<div id="ChartView">
<!--we created a canvas and it gets refreshed automatically with every click inside the div-->
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!--the chart.js reference-->
<script type="text/javascript">
$(function () {
$("#ID").click(function () {
var chartType = $("#ChartType").val();
var chartView = document.getElementById('ChartView');
chartView.innerHTML = ' ';
$('#ChartView').append('<canvas id="myChart" style="max-width:750px;max-height:400px;"><canvas>');
$.ajax({ //ajax method to fetch the data from the db
type: "POST",
url: "/Trss/GetData",
data: "",
contextType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccessResult,
error: OnError
});
function OnSuccessResult(data) {
var _data = data;
var _chartLabels = _data[0].map(d => new Date(d).toLocaleDateString() + ' ' + new Date(d).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));;
var _chartData = _data[1];
var barColor = ["blue", "purple", "orange", "brown", "green", "red"];
new Chart("myChart", //this is where we generate the graph
{
type: chartType,
data: {
labels: _chartLabels,
datasets: [{
backgroundColor: barColor,
data: _chartData
}]
}
});
}
function OnError(err) {
}
});
});
</script>
有人可以帮我吗?
我试图寻找解决方案,但无济于事。