如何使用谷歌图表与数据从csv

How to use Google Chart with data from a csv

本文关键字：数据 csv 何使用 谷歌      更新时间：2023-09-26

我有一个csv文件，看起来像这样:

week,value1,value2
1,2,3
2,7,9

我想用谷歌图表绘制它的堆叠图(周是我的x(水平)值，values1和values2是两组y)。不幸的是，我没有找到任何简单的方法来做到这一点。这可能与我是一个完全的js新手有关。

有什么简单的方法吗?

jquery-csv库提供了将csv字符串转换为供google.visualization.arrayToDataTable()使用的数组的能力(他们的示例在这里)。要做到这一点，将jquery.csv.js添加到您的服务器(在下面的示例中，我假设它与HTML在同一文件夹中)并链接到您的<head>中。下面是一个简单的脚本，你可以添加到你的<head>开始。我假设是散点图，但这个过程适用于这里的任何图表。您还需要<div>和id="chart"才能工作。

// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
// this has to be a global function
function drawChart() {
   // grab the CSV
   $.get("example.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);
      // this view can select a subset of the data at a time
      var view = new google.visualization.DataView(data);
      view.setColumns([0,1]);
     // set chart options
     var options = {
        title: "A Chart from a CSV!",
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
        vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
        legend: 'none'
     };
     // create the chart object and draw it
     var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
     chart.draw(view, options);
  });
}

我已经搜索了一段时间，并在谷歌小组讨论中找到了解决方案。https://groups.google.com/forum/!主题/google-visualization-api cnXYDr411tQ

我试过了，它有效!

在本例中，我们必须指定csv文件的头文件类型。

var queryOptions = {
    csvColumns: ['number', 'number', 'number' /* Or whatever the columns in the CSV file are */],
    csvHasHeader: true /* This should be false if your CSV file doesn't have a header */
}
/* csvUrl is the path to your csv */    
var query = new google.visualization.Query(csvUrl, queryOptions);
query.send(handleQueryResponse);
function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    var chart = new google.visualization.ColumnChart(document.getElementById('your div'));
    // Draw your chart with the data table here.
    // chart.draw(view, queryOptions);
}

您使用的是哪种服务器端脚本语言(php, asp)?

一个选项可以是从保存在Google Drive中的电子表格中导入数据，这里有一个基于PHP的从Google Docs中保存和提取数据的示例。这将使您能够更新电子表格，图表将自动绘制新数据。

相关文章：