我正在尝试使用从ASP.NET Core MVC中的SQL表获取的数据创建Chart.js。我成功地接收到了数据,因为我测试了将其作为表打印到网站上,并且运行正常。问题是我无法在Chart.js中显示相同的数据
家庭模型.cs:
namespace SiteFinanceiroGG.Models
{
public class TickerCadastral
{
//...
}
[Keyless]
public class TickerCotacoes
{
public string CodigoNegociacao { get; set; }
[DataType(DataType.Date)]
public DateTime DataPregao { get; set; }
public string Moeda { get; set; }
[Column(TypeName = "decimal(13,2)")]
public double PrecoMin { get; set; }
[Column(TypeName = "decimal(13,2)")]
public double PrecoMax { get; set; }
[Column(TypeName = "decimal(13,2)")]
public double PrecoUltimoNegocio { get; set; }
}
public class TickerMultipleModel
{
public List<TickerCadastral> tickerCadastral { get; set; }
public List<TickerCotacoes> tickerCotacoes { get; set; }
}
}
我的数据库联系人.cs:
namespace SiteFinanceiroGG.Data
{
public class MyDbContext : DbContext
{
public MyDbContext (DbContextOptions<MyDbContext> options)
: base(options)
{
}
public DbSet<TickerCadastral> TickerCadastral { get; set; }
public DbSet<TickerCotacoes> TickerCotacoes { get; set; }
}
}
主控制器.cs:
namespace SiteFinanceiroGG.Controllers
{
public class HomeController : Controller
{
private readonly MyDbContext _context;
public HomeController(MyDbContext context)
{
_context = context;
}
public IActionResult Index()
{
return View();
}
public async Task<IActionResult> Acoes(string searchString)
{
if (searchString == null)
{
return View();
}
else
{
TickerMultipleModel tickerMultipleModel = new TickerMultipleModel();
tickerMultipleModel.tickerCadastral = await _context.TickerCadastral.Where(m => m.CodigoNegociacao == searchString).ToListAsync();
tickerMultipleModel.tickerCotacoes = await _context.TickerCotacoes.Where(m => m.CodigoNegociacao == searchString)
.OrderBy(m=>m.DataPregao).ToListAsync();
return View(tickerMultipleModel);
}
}
}
}
Acoes.cshtml(表可以工作,但图表不显示):
@model SiteFinanceiroGG.Models.TickerMultipleModel
@{
ViewData["Title"] = "Ações";
}
<h2>Ações</h2>
@using (Html.BeginForm("Acoes", "Home", FormMethod.Get))
{
@Html.TextBox("searchString");
<input type="submit" value="Pesquisar" placeholder="Buscar Ações" />
}
@if (Model != null)
{
<div>
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<table class="table">
<tbody>
<tr>
<th>@Html.DisplayNameFor(model => model.tickerCotacoes[0].DataPregao)</th>
<th>@Html.DisplayNameFor(model => model.tickerCotacoes[0].CodigoNegociacao)</th>
<th>@Html.DisplayNameFor(model => model.tickerCotacoes[0].Moeda)</th>
<th>@Html.DisplayNameFor(model => model.tickerCotacoes[0].PrecoMin)</th>
<th>@Html.DisplayNameFor(model => model.tickerCotacoes[0].PrecoMax)</th>
<th>@Html.DisplayNameFor(model => model.tickerCotacoes[0].PrecoUltimoNegocio)</th>
</tr>
@foreach (var item in Model.tickerCotacoes)
{
<tr>
<td>@item.DataPregao</td>
<td>@item.CodigoNegociacao</td>
<td>@item.Moeda</td>
<td>@item.PrecoMin</td>
<td>@item.PrecoMax</td>
<td>@item.PrecoUltimoNegocio</td>
</tr>
}
</tbody>
</table>
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
var DataPregao = [];
var PrecoUltimoNegocio=[];
@if (Model != null)
{
@foreach(var item in Model.tickerCotacoes)
{
@:DataPregao.push(@item.DataPregao);
@:PrecoUltimoNegocio.push(Convert.ToDecimal(@item.PrecoUltimoNegocio));
}
}
new Chart(ctx, {
type: 'line',
data: {
labels: DataPregao,
datasets: [{
label: '# of Votes',
data: PrecoUltimoNegocio,
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
1条答案
按热度按时间ecr0jaav1#
修改您的js代码如下: