ASP.NET Core 3.1如何动态传JSON数据到Google Charts生成股票图表？

1. 调整控制器方法，接收股票代码参数 #

修改StocksController中的GetLineChartJSON方法，添加股票代码参数用于LINQ查询对应数据：

[HttpGet]
public IActionResult GetLineChartJSON(string ticker)
{
    // 用传入的ticker参数执行数据库查询
    var stockData = _context.StockPrices
        .Where(s => s.Ticker == ticker)
        .Select(s => new { Date = s.Date, Price = s.Price })
        .ToList();
    
    // 构造Google Charts兼容的JSON结构（含表头和数据行）
    var chartData = new {
        cols = new[] {
            new { id = "", label = "日期", type = "date" },
            new { id = "", label = "价格", type = "number" }
        },
        rows = stockData.Select(d => new {
            c = new[] {
                new { v = $"Date({d.Date.Year},{d.Date.Month-1},{d.Date.Day})" },
                new { v = d.Price }
            }
        })
    };
    
    return Json(chartData);
}

2. 传递用户选择的股票代码到视图 #

在StocksController的Chart方法中，将用户提交的股票代码通过ViewData或模型传递给视图：

[HttpPost]
public IActionResult Chart(string ticker)
{
    // 可选：验证股票代码有效性
    ViewData["SelectedTicker"] = ticker;
    return View();
}

3. 修改前端AJAX请求，携带股票参数 #

在Chart.cshtml中，利用视图传递的股票代码，发起AJAX请求时带上参数：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var selectedTicker = '@ViewData["SelectedTicker"]';
        
        $.ajax({
            url: '/Stocks/GetLineChartJSON',
            type: 'GET',
            data: { ticker: selectedTicker }, // 传递股票代码参数
            dataType: 'json',
            success: function(data) {
                var dataTable = new google.visualization.DataTable(data);
                
                var options = {
                    title: `${selectedTicker} 股票价格走势`,
                    curveType: 'function',
                    legend: { position: 'bottom' }
                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(dataTable, options);
            },
            error: function(xhr, status, error) {
                console.error('数据获取失败:', error);
            }
        });
    }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

4. 关键验证步骤 #

• 打开浏览器开发者工具的Network标签，确认AJAX请求的ticker参数是否正确传递
• 检查GetLineChartJSON返回的JSON结构是否匹配Google Charts要求，确保表头cols和数据行rows格式无误
• 验证控制器路由配置，确保/Stocks/GetLineChartJSON能正确映射到目标方法

内容的提问来源于stack exchange，提问作者Tobzz