javascript - 从数组为Google Chart创建数据表

标签 javascript charts google-visualization

我需要创建一个数据表以从数组开始传递Google图表:我从PHP的OpenWeather API中检索数据(例如温度),然后将温度数组转换为javascript数组。从此数组,我使用以下代码构建数据表:

 <script type="text/javascript">
    var temp=new Array();
    <?php
    for($i=0;$i<count($temperatura);$i++){?>
    temp[<?php echo $i; ?>]="<?php echo "$temperatura[$i]"; ?>";
    <?php 
    }?>

      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

         var data2 = new Array();

         data2[0] = [ 'Data', 'Temp.' ];
         for (i = 0; i < temp.length; i++) {
                data2[i + 1] = [ '10/04/2017', 'temp[i]' ];  
         }


        var data = google.visualization.arrayToDataTable(data2, false);
        document.write(data); //this cause the message [object Object]

        var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Line.convertOptions(options));
       }    
  }
  </script>

  <div id="chart_div"></div>


在浏览器中,我看到消息[object Object],但我不明白这是什么错误。可以帮我?
我读了一些类似的问题,但是它们不能解决我的问题。

最佳答案

这是我的新代码:

<script type="text/javascript">
    var temp=new Array();
    <?php
    for($i=0;$i<count($temperatura);$i++){?>
    temp[<?php echo $i; ?>]="<?php echo "$temperatura[$i]"; ?>";
    <?php 
    }?>

    var dataora=new Array();
    <?php
    for($i=0;$i<count($dataora);$i++){
    ?>
        dataora[<?php echo $i; ?>]="<?php echo "$dataora[$i]"; ?>";
    <?php 
    }?>

      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

         var data2 = new Array();

         data2[0] = [ 'Data', 'Temperatura' ];
         for (i = 0; i < temp.length; i++) {
                data2[i + 1] = [ [dataora[i]], [parseFloat(temp[i]) ] ]; 
         }

         var data = google.visualization.arrayToDataTable(data2, false);

         document.write(JSON.stringify(data));

         console.log(data);

         var options = {
              chart: {
              title: 'Previsioni Temperatura',
              subtitle: 'in °C'
             },
         width: 1000,
         height: 500,
         axes: {
         }
      };


我从openweather的结果中检索日期数组。
在控制台中,我出现了错误:

错误:未定义容器jsapi_compiled_default_module.js:63:448

结果

 document.write(JSON.stringify(data));


是:

"{\"cols\":[{\"label\":\"Data\",\"type\":\"timeofday\"},{\"label    
\":\"Temperatura\",\"type\":\"timeofday\"}],\"rows\":[{\"c\":[{\"v
\":[\"2017-05-01 15:00:00\"]},{\"v\":[17.35]}]},{\"c\":[{\"v\":[\"2017-05-01 
18:00:00\"]},{\"v\":[15.72]}]},{\"c\":[{\"v\":[\"2017-05-01 21:00:00\"]},  
{\"v\": [15.32]}]},.....{\"c\":[{\"v\":[\"2017-05-06 12:00:00\"]},{\"v\":    
[17.32]}]}]}"


我尝试对cicle进行更多修改,但没有结果。
有什么建议吗?

关于javascript - 从数组为Google Chart创建数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43616242/

相关文章:

javascript - 从 JavaScript 禁用悬停规则

c# - ASP.NET 条形图标签

javascript - 如何根据值打印不同的路径颜色?

javascript - 在 Google 图表烛台图中使用 DateTime 而不是 Date

javascript - Google 条形图将 x 轴标签移动到顶部

javascript - 单击另一个元素后,使用 vanilla javascript 将类添加/删除到另一个元素

javascript - 从表单外部获取值

javascript - 使用 javascript 单击后更改按钮的文本

reactjs - 使用chart.js、react和es6渲染条形图

google-visualization - 向 Google 图表的 LineChart 添加水平引用线