ASP.NET MVC结合Google Charts加载数据库数据时图表空白问题

我帮你排查了代码里的几个关键问题，这些应该就是导致图表空白的核心原因：

1. 控制器返回值逻辑错误 #

你的Index方法现在错误地把JsonResult传给了View，但实际上应该直接返回JSON数据给前端。同时修正了拼写错误和资源泄漏问题：

public ActionResult Index() {
    // 使用using包裹DbContext，确保数据库连接资源被正确释放
    using (HomelabEntities entities = new HomelabEntities())
    {
        var result = entities.DividendTrackings
            .Where(x => x.Product != null)
            .GroupBy(o => o.Product)
            .Select(g => new { product = g.Key, total = g.Sum(i => i.Shares) })
            .ToList();
        // 直接返回JSON数据，无需包裹View
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

2. JSON请求路径写法错误 #

@Url.Action的正确用法应该是指定动作和控制器名称，而不是硬编码路径，这样能适配不同的部署环境：

// 修正前：@Url.Action("/Home/Index")
// 修正后：
$.getJSON("@Url.Action("Index", "Home")", null, function (result) {
    // 后续处理逻辑
});

3. 数据字段不匹配 #

你在控制器里聚合出的字段是total（对应Shares的总和），但前端代码里却试图读取item.amount，这会导致无法正确填充图表数据：

$.each(result, function (i, item) {
    // 把item.amount改成item.total，和控制器返回的字段对应
    data.addRow([item.product, item.total]);
});

4. DOM容器ID不匹配 #

视图里的div容器ID是chartdiv，但JavaScript代码里获取的是chart_div，两者不一致会导致图表找不到挂载的容器：

<!-- 修正前 -->
<div id="chartdiv" style="width: 500px; height: 300px;"></div>

<!-- 修正后 -->
<div id="chart_div" style="width: 500px; height: 300px;"></div>

5. Google Charts 加载方式过时 #

旧版的google.load API已经不再推荐使用，建议改用新版加载方式避免潜在的加载时序问题：

<!-- 替换原来的google.com/jsapi引用 -->
<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() {
    // 你的绘图逻辑
}
</script>

额外调试技巧 #

如果修复后还是有问题，可以打开浏览器开发者工具（F12）：

• 查看Console面板：检查是否有JavaScript报错
• 查看Network面板：确认/Home/Index的请求是否成功，返回的JSON数据是否符合预期

把这些问题全部修复后，应该就能正常渲染图表了。

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