google graph 没有数据时如何显示空图

Question

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

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

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 来创建数据 table,
如果有可能没有数据存在。

我们必须使用 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]);
}

请参阅以下工作片段...

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>

google graph 没有数据时如何显示空图

google graph how to display empty graph when there is no data

jquery

asp.net-mvc-4

charts

google-visualization