Google 图表 - 表格有列时没有列

Question

我正在尝试创建 Google Charts 折线图。我从 C# MVC 控制器方法返回的 Json 如下所示：

我的 JS 代码如下所示：

function drawChart() {
    var jsonData = $.ajax({
        url: "/Misc/GetWeeklySalesData/",
        dataType: "json",
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    alert(data);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
    chart.draw(data, { width: 400, height: 240 });

我收到消息“表没有列”，但显然确实如此。

Answer 1

要直接从 JSON 创建数据表，它必须采用特定格式：

构造函数的 JavaScript 文字数据参数的格式

否则，您可以创建一个空白数据表并手动加载行：

$.ajax({
  url: "/Misc/GetWeeklySalesData/",
  dataType: "json",
}).done(function (jsonData) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Week');
  data.addColumn('number', 'Retail');
  data.addColumn('number', 'Wholesale');

  jsonData.forEach(function (row) {
    data.addRow([
      row.Week,
      row.Retail,
      row.Wholesale
    ]);
  });

  var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
  chart.draw(data, {
    width: 400,
    height: 240
  });
}).fail(function (jq, text, err) {
  console.log(text + ' - ' + err);
});

注意：强烈建议不要使用 --> async: false。使用done回调代替...