如何从CSV文件中的日期时间戳生成Google图表

Question

我是一名有用的助手，可以为您翻译文本。

我有一个CSV文件，其中包含时间戳（从1970年以来的毫秒数）作为X轴，用逗号“，”分隔，以及与之相关联的温度值作为Y轴。

例如：

1485097200000,22.5
1485098100000,23.8
1485099000000,24.2
etc ...

我希望您能够从这种CSV文件中生成类似于以下的谷歌图表代码：

```html

从这种CSV文件中，我想生成类似于以下的谷歌图表代码：

```

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


google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperatures');

  data.addRows([
    [new Date(1485097200000), 22.5],
    [new Date(1485098100000), 23.8],
    [new Date(1485099000000), 24.2]
  ]);


  var options = {
    title: 'Temperature measured every 15 minutes',
    width: 900,
    height: 500,
    hAxis: {

      gridlines: {count: 15}
    },
    vAxis: {
      gridlines: {color: 'none'},
      minValue: 0
    }
  };

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

  chart.draw(data, options);

  var button = document.getElementById('change');



  button.onclick = function () {

    // If the format option matches, change it to the new option,
    // if not, reset it to the original format.
    options.hAxis.format === 'M/d/yy' ?
      options.hAxis.format = 'MMM dd, yyyy' :
    options.hAxis.format = 'M/d/yy';

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change">Click to change the format</button>
<div id="chart_div"></div>

你能告诉我是否可能以及如何做到这一点，因为我是新手。

敬礼，

- Laurent Coulon

---

在jsfiddle中使用代码的问题是什么？毫秒级别的时间有什么问题吗？我不确定哪里出错了？ - Mosh Feu

没有关于jsfiffle.net的问题，我只想知道如何从CSV文件中解析数据，以便将行填充到data.addRows（[ ... ]）并生成Google图形。 - Laurent Coulon

请查看以下问题和答案，了解如何使用jQuery获取CSV并加载Google图表：http://stackoverflow.com/q/38517946/5090771 - WhiteHat

Answer 1

以下是如何从CSV文件中获取数据的示例（在本例中，数据来自字符串，但原理相同）。

CSV文件应该长这样：

1486727700000,5\n1486728600000,7\n1486729200000,3\n1486729800000,1\n1486730400000,3\n1486731000000,4\n1486731600000,3\n1486732200000,4\n1486732800000,4

此处需要从文件中提取数据，下面是相应的函数。

function getData(csv) {
  var output = [];
  csv.split(/\n/).forEach(function(row) {
    var cells = row.split(','),
        date = new Date(parseInt(cells[0])),
        value = parseFloat(cells[1]);

    output.push([date, value]);
  });

  return output;
}

这里有一个实时演示：

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

// google.load('visualization', '1', {'packages':['annotatedtimeline']});
// google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperatures');

  //   data.addRows([
  //     [new Date(2017, 1, 10, 13, 55), 5],  [new Date(2017, 1, 10, 14, 10), 7],  [new Date(2017,1, 10,14,20), 3],
  //     [new Date(2017, 1, 10, 14, 30), 1],  [new Date(2017, 1, 10, 14,40), 3],  [new Date(2017, 1, 10, 14,50), 4],
  //     [new Date(2017, 1, 10,15,00), 3],  [new Date(2017, 1, 10,15,10), 4],  [new Date(2017, 1, 10,15,20), 2]
  //   ]);

  data.addRows(getData(csvFile));

  var options = {
    title: 'Temperature measured every 15 minutes',
    width: 900,
    height: 500,
    hAxis: {

      gridlines: {count: 15}
    },
    vAxis: {
      gridlines: {color: 'none'},
      minValue: 0
    }
  };

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

  chart.draw(data, options);

  var button = document.getElementById('change');

  button.onclick = function () {

    // If the format option matches, change it to the new option,
    // if not, reset it to the original format.
    options.hAxis.format === 'M/d/yy' ? options.hAxis.format = 'MMM dd, yyyy' : options.hAxis.format = 'M/d/yy';

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

var csvFile = '1486727700000,5\n1486728600000,7\n1486729200000,3\n1486729800000,1\n1486730400000,3\n1486731000000,4\n1486731600000,3\n1486732200000,4\n1486732800000,4';

function getData(csv) {
  var output = [];
  csv.split(/\n/).forEach(function(row) {
    var cells = row.split(','),
        date = new Date(parseInt(cells[0])),
        value = parseFloat(cells[1]);

    output.push([date, value]);
  });

  return output;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<button id="change">Click to change the format</button>
<div id="chart_div"></div>

http://output.jsbin.com/coxemay

更新

如何使用ajax从文件中获取CSV

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

function drawChart(csvData) {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperatures');

  getData(function(csvData) {
    data.addRows(csvData);

    var options = {
      title: 'Temperature measured every 15 minutes',
      width: 900,
      height: 500,
      hAxis: {

        gridlines: {count: 15}
      },
      vAxis: {
        gridlines: {color: 'none'},
        minValue: 0
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  });


  var button = document.getElementById('change');

  button.onclick = function () {

    // If the format option matches, change it to the new option,
    // if not, reset it to the original format.
    options.hAxis.format === 'M/d/yy' ? options.hAxis.format = 'MMM dd, yyyy' : options.hAxis.format = 'M/d/yy';

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

function getData(callback) {
  $.get('https://gist.githubusercontent.com/moshfeu/e3fd00cb57ae5b5cffbda44422dff112/raw/bcadcdfb5a532cc5711949a60cce639b2da235e6/csv-file', function(csv) {
    var output = [];
    csv.split(/\n/).forEach(function(row) {
      var cells = row.split(','),
          date = new Date(parseInt(cells[0])),
          value = parseFloat(cells[1]);

      output.push([date, value]);
    });

    callback(output);
  });
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<button id="change">Click to change the format</button>
<div id="chart_div"></div>

http://jsbin.com/coxemay/3/edit?html,js,console

- Mosh Feu

---

非常感谢Mosh Feu。 - Laurent Coulon

如果CSV文件每行有第三个数据，是否可以在图表上使用第二个Y轴绘制它？我还想让用户自己定义时间线范围，以便根据指定的时间窗口绘制图表的特定部分，用户将在2个文本框中输入所需图表的第一个和最后一个日期。这些增强功能可行吗？ - Laurent Coulon

它可以从CSV文件中工作。你知道为什么我不能添加到那个图表: google.load('visualization', '1', {'packages':['annotatedtimeline']}); 这个功能对我非常有用，但似乎与 google.charts.load('current', {'packages': ['corechart']}); 不兼容。我错在哪里了？ - Laurent Coulon

@LaurentCoulon 很高兴为您效劳 :) 您知道如何接受答案吗？ - Mosh Feu

不，还没有，抱歉。 - Laurent Coulon