谷歌图表不绘制答案

【问题标题】：Google chart not draw谷歌图表不绘制
【发布时间】：2018-06-08 19:02:18
【问题描述】：

我有一个问题。谷歌图表不绘制。

这是我的代码

<script>
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
        function drawChart() {
    var jsonData = $.ajax({
            url: "/temhum",
            dataType:"json",
        }).done(function (jsonData) {
  var data = new google.visualization.DataTable();

  console.log(jsonData);
  data.addColumn('string', 'date');
  data.addColumn('number', 'temperature');
  data.addColumn('number', 'humidity');

  jsonData.forEach(function (row) {
    data.addRow([
      row.date,
      row.temperature,
      row.humidity
    ]);
  });

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

  }

</script>

这是我的控制台日志 log

我不知道。为什么不画图表。有人知道如何使用 node.js、google chart 和 mysql 实时表示数据吗？

【问题讨论】：

您可以在声明前使用drawChart()。尝试将顺序更改为google.setOnLoadCallback(drawChart); function drawChart() {...} => 以函数 drawChart() {...}; google.setOnLoadCallback(drawChart);
同样的事情发生

标签： mysql json node.js charts google-visualization

【解决方案1】：

json 中的值必须与列类型匹配

所有三个 json 列都是字符串，
您可以使用以下内容将每个转换为正确的类型...

data.addRow([
  new Date(row.date),
  parseFloat(row.temperature),
  parseFloat(row.humidity)
]);

【讨论】：

【解决方案2】：

想你。我解决了问题

解决方案是..

sungyong 和白帽代码组合

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script>
      google.load("visualization", "1", {
         packages: ["corechart"]
      });
      google.setOnLoadCallback(drawChart);

      function drawChart() {
         var jsonData = $.ajax({
            url: "/temhum",
            dataType: "json",
         }).done(function(jsonData) {
            var data = new google.visualization.DataTable(jsonData);
            console.log(jsonData);
            data.addColumn('datetime', 'date');
            data.addColumn('number', 'temperature');
            data.addColumn('number', 'humidity');
            console.log(data);
            jsonData.forEach(function(row) {
               data.addRow([
                  new Date(row.date),
                  parseFloat(row.temperature),
                  parseFloat(row.humidity)
               ]);
            });
            var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
            chart.draw(data, {
               width: 600,
               height: 600
            });
         }).fail(function(jq, text, err) {
            console.log(text + ' - ' + err);
         });
      }
   </script>

【讨论】：