javascript - 如何从 csv 文件的日期时间戳生成 Google 图表

Question

我有一个 CSV 文件，其中包含日期时间戳(从 1970 年开始以毫秒为单位)，X 轴以逗号“,”分隔，Y 轴以关联的温度值分隔。

即:

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

我想从那种 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>

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

问候，

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