ASP.NET核心MVC使用SQL Server中的数据创建Chart.js时出现问题

bwitn5fc  于 2023-01-17  发布在  Chart.js
关注(0)|答案(1)|浏览(147)

我正在尝试使用从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>
ecr0jaav

ecr0jaav1#

修改您的js代码如下:

@if (Model != null)
{
    @foreach (var item in Model.tickerCotacoes)
    {
        @:DataPregao.push('@item.DataPregao');   //add '' surround the @item.DataPregao
                         //add @ before Convert
   @:PrecoUltimoNegocio.push(@Convert.ToDecimal(@item.PrecoUltimoNegocio));  
    }
}

相关问题