谷歌图表在所有情况下都打印“表格没有列”？答案

【问题标题】：Google chart prints "Table has no columns" in all cases?谷歌图表在所有情况下都打印“表格没有列”？
【发布时间】：2016-03-06 19:48:01
【问题描述】：

我正在尝试借助谷歌图表生成折线图。但是，我看到“表没有列”。我尝试了谷歌网站上给出的例子并观察到了同样的情况。以下是我的代码：

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
  var jsonDataString = "{\"cols:\":{\"Time\":\"\",\"Sensor-1\":\"\",\"Sensor-2\":\"\",\"Sensor-3\":\"\",\"Sensor-4\":\"\"},\"rows\":[{\"1\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"2\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"3\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"4\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"5\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"6\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"7\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"8\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"9\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"10\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]}]}"; 
  var jsonData = JSON.parse(jsonDataString);
  console.log(jsonData);
  var data = new google.visualization.DataTable(jsonData);

    var options = {
      title: 'time - temp',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);

  }
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

任何想法，我哪里错了？谢谢。

【问题讨论】：

文档还没有准备好。查看接受的答案stackoverflow.com/questions/556406/…
@EricGuan 不，这不应该是这样，因为 setOnLoadCallback 是在文档准备好和谷歌 API 加载后触发的。

标签： javascript jquery google-visualization

【解决方案1】：

您的 JSON 对象的格式不正确，无法直接从中生成数据表。接受的 JSON 格式是：

{
  "cols": [
        {"label":"Topping","type":"string"},
        {"label":"Slices","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms"},{"v":3}]},
        {"c":[{"v":"Onions"},{"v":1}]},
        {"c":[{"v":"Olives"},{"v":1}]},
        {"c":[{"v":"Zucchini"},{"v":1}]},
        {"c":[{"v":"Pepperoni"},{"v":2]}
      ]
}

一个嵌套的 JSON 对象，其“cols”数组包含 X 个对象，其中 X = 您的列数，以及一个“行”数组，包含 Y 个“c”节点，其中 Y = 您的行数，并且在每个“c”节点内，有 Z 个“v”节点，其中 Z = 您的列数。

你应该在这里查看谷歌文档：

Google JSON DATA

P.S 尝试用我的示例中提供的字符串替换您的 JSON 字符串，您会看到您的折线图将被绘制，因为我没有在您的代码中看到任何错误。

【讨论】：