ASP.NET Core MVC基于SQL Server数据生成Chart.js图表失败问题

已成功从SQL Server获取数据并在页面表格中正常展示，但相同数据无法加载到Chart.js图表中，以下是问题分析与修复方案：

HomeModel.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; }
    }
}

MyDbContext.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; }
    }
}

HomeController.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的脚本部分，原代码存在两个致命错误：

1. 日期数据未转成字符串格式，直接push会被解析为无效JS对象
2. 使用了C#的Convert.ToDecimal方法，JS中不存在该方法

修改后的Acoes.cshtml脚本段 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   
<script>
    const ctx = document.getElementById('myChart');

    // 用Json序列化直接传递数据（简洁且避免拼接错误）
    const dataPregao = @Json.Serialize(Model.tickerCotacoes.Select(x => x.DataPregao.ToString("yyyy-MM-dd")));
    const precoUltimoNegocio = @Json.Serialize(Model.tickerCotacoes.Select(x => x.PrecoUltimoNegocio));

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: dataPregao,
            datasets: [{
                label: '最后成交价',
                data: precoUltimoNegocio,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: false, // 股价无需从0开始，更贴合实际
                    title: {
                        display: true,
                        text: '价格'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '日期'
                    }
                }
            }
        }
    });
</script>

核心修改点 #

1. 日期格式化：将DataPregao转为yyyy-MM-dd字符串格式，确保JS能识别为有效标签
2. 数值传递：直接输出PrecoUltimoNegocio的数值，JS自动解析为数字类型
3. 序列化优化：用Json.Serialize直接将后台数据转为JS数组，避免循环拼接的语法错误
4. 图表体验优化：调整Y轴起始值、添加轴标题，让图表更贴合业务场景

内容的提问来源于stack exchange，提问作者João Guilherme