谷歌图表如何在没有数据时显示空图表

Question

我有一个谷歌图表，当有数据时它按预期工作

但是当没有数据时，它会显示如下消息

Data column(s) for axis #0 cannot be of type string

这是我正在尝试的代码

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 = 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]);
            chart.draw(data, options);
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
}



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")); // when the table has no rows it is displaying that error message
    foreach (DataRow row in table.Rows)
        {
            chartData.Add(new object[]
            {
                row["TypeName"], row["DataCount"]
            });
        }
        return Json(chartData);
}

@whitehat 建议后

Answer 1

首先，需要了解arrayToDataTable 的工作原理。
它使用数组中提供的数据来确定每个列的类型。

如果只提供列标题，
没有数据可以确定类型。
并且它默认两种列类型为字符串。

'corechart' 包中的所有图表类型都希望第一个系列是数字、日期，而不是字符串。
所以我们不能使用arrayToDataTable来创建数据表，
如果有可能不存在数据。

我们必须使用DataTable默认构造函数。

var data = new google.visualization.DataTable();

然后我们可以测试接收到的数据数组以确定数据是否存在。
如果不存在数据，我们可以添加一个空白行来绘制一个空白图表。

在本例中，我们接收以下格式的数据。

var r = [['Name', 'Count']];

我们删除第一行/数组以用作列标题。

var cols = r.splice(0, 1);
cols[0].forEach(function (col, index) {
  if (index === 0) {
    data.addColumn('string', col);
  } else {
    data.addColumn('number', col);
  }
});

然后确定是否存在其他行，
如果不添加空行。

if (r.length > 0) {
  data.addRows(r);
} else {
  data.addRow(['', null]);
}

请参阅以下工作 sn-p...

var r = [['Name', 'Count']];

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  var cols = r.splice(0, 1);
  cols[0].forEach(function (col, index) {
    if (index === 0) {
      data.addColumn('string', col);
    } else {
      data.addColumn('number', col);
    }
  });
  if (r.length > 0) {
    data.addRows(r);
  } else {
    data.addRow(['', null]);
  }

  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]);
  chart.draw(data, options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="vesselGraph"></div>