Question

我想从服务器端文本文件中显示检索到的数据点在谷歌图上。在研究期间，我现在可以从temps.txt中检索数据文件使用$ .get（）。

我刚开始学习javascript，所以这可能是我错过的显而易见的事情。

我还可以使用一些示例数据点显示示例谷歌图表。

我怎么把两者放在一起？，下面我有两个源文件从我到目前为止的尝试。

获取数据点：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 16px;
    font-family: Arial;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
var times = [];

$.get('temps.txt', function(data) {
  times = data.split("\n");
  var html = [];
  for (var i in times) {
    html.push(times[i] + '<br/>');
  }
  html.push( times[0] * 3 );
  $('body').append(html.join(''));
});


</script>
</html>

显示GRAPH：

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Hours', 'Temperature'],
      ['18:00',  20.7],
      ['19:00',  21],
      ['20:00',  22.3],
      ['20:30',  22.5],
      ['21:00',  22.0],
  ['22:00',  21.6]

    ]);

    var options = {
      title: 'Temperatuur Grafiek',
  legend: { position: 'bottom' } 
    };

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

    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="chart_div" style="width: 700px; height: 400px;"></div>
</body>
</html>

Temps.txt文件是一个简单的文本文件，每小时有一个测量值第一行是00:00，第二行是01:00，依此类推，见下文：

15.3
16.4
16.7
18.8
... etc

Answer 1

嗯，会是这样的：

function drawChart() {
    $.get('temps.txt', function(txt) {
        vals = txt.split("\n");
        var hour= 0;
        var dataArr=[['Hours', 'Temperature']]
        for(var i = 0; i < vals.length;i++){ // build data array
            //add the hour in 'hh:00' format and the temperature value
            dataArr.push([('0'+hour).substring(-2)+':00', parseFloat(vals[i])]);
            hour+=1;
        }

        var data = google.visualization.arrayToDataTable(dataArr)
        var options = {
            title: 'Temperatuur Grafiek',
            legend: { position: 'bottom' } 
        };

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

        chart.draw(data, options);
    });
}

在谷歌图表上显示服务器端txt文件中的数据点

1 个答案: