Google图表有数据运行正常 无数据报错如何显示空图表

问题根因 #

当查询结果无数据时，后端返回的图表数据仅包含表头行["Name", "Count"]，Google图表的arrayToDataTable方法无法自动推断Count列的数值类型，默认判定为字符串类型，与柱状图Y轴要求的数值类型不匹配，因此触发报错。另外原代码存在一处逻辑错误：创建了DataView实例但调用chart.draw时传入的是原始data而非处理后的view，也会导致标注逻辑不生效。

解决方案 #

可任选以下任意一种方案实现无数据时正常展示：

方案1：前端处理（推荐，兼容性更强） #

在前端逻辑中判断数据长度，无数据时手动创建DataTable并明确指定列类型，避免自动推断错误：

function drawBarChar() {
    show('loading5', true);
    var data = JSON.stringify({
        'GraphId': 1,
        'startDt': $("#from-date").val(),
        'endDt': $("#to-date").val()
    });
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            show('loading5', false);
            var data;
            // 仅存在表头的无数据场景
            if (r.length === 1) {
                // 手动声明列类型，避免类型推断错误
                data = new google.visualization.DataTable();
                data.addColumn('string', 'Name');
                data.addColumn('number', 'Count');
            } else {
                data = google.visualization.arrayToDataTable(r);
            }

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                {
                    calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation"
                }
            ]);

            var options = {
                width: 500,
                height: 400,
                colors: ["#6cc49c"],
                bar: { groupWidth: "65%" },
                legend: { position: "none" }
            };

            var chart = new google.visualization.BarChart($("#vesselGraph")[0]);
            // 修正原逻辑错误，传入处理后的view
            chart.draw(view, options);
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
}

该方案无数据时会展示完全空白的图表。

方案2：后端处理 #

无数据时插入占位数据行，明确第二列为数字类型，帮助Google图表正确识别列类型：

public JsonResult LoadGraph(int GraphId, DateTime? startDt = null, DateTime? endDt = null)
{
    List<object> chartData = new List<object>
    {
       new object[]
       {
          "Name", "Count"
       }
    };
    DataTable table = db.GetAllFromDb("up_DashboardList", "@dashBoardId", GraphId,
            "@startDate", startDt.Value.ToString("yyyy-MM-dd"), "@endDate", endDt.Value.ToString("yyyy-MM-dd"));
    foreach (DataRow row in table.Rows)
        {
            chartData.Add(new object[]
            {
                row["TypeName"], row["DataCount"]
            });
        }
    // 无数据时插入占位行
    if(table.Rows.Count == 0)
    {
        chartData.Add(new object[]
        {
            "暂无数据", 0
        });
    }
    return Json(chartData);
}

该方案无数据时会展示一条标注「暂无数据」的0值柱，可直接修改占位文案适配业务需求。

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