谷歌圖如何在沒有資料時顯示空圖

我有一個谷歌圖表，當有資料時它按預期作業

但是當沒有資料時，它會顯示如下訊息

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 建議之后

uj5u.com熱心網友回復：

首先，需要了解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]);
}

請參閱以下作業片段...

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>

標籤：查询 asp.net-mvc-4 图表 谷歌可视化

上一篇：paramsViewResult[]將相同的模型應用于作為引數傳遞的所有ViewResult實體

下一篇：在ASP.NETMVC中從不同模型呼叫視圖