Question

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

这是我的代码

<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实时表示数据吗？

Answer 1

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

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

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

Answer 2

想想你。我解决了问题

解决方案是......

sungyong＆amp; WhiteHat Code Mix

<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>

谷歌图表没有绘制

2 个答案: