我正在尝试从 CSV 输入创建 Google 图表。
这是我当前的代码(在教程中找到)，不幸的是它不起作用 - 结果是一个空图表:
<!DOCTYPE html>
<html>
<head>
<title>Google Chart Example</title>
<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.csv-0.71.min.js"></script>
<script type='text/javascript'>
// wait till the DOM is loaded
$(function() {
// grab the CSV
$.get("post.csv", function(csvString) {
// display the contents of the CSV
$("#chart").html(csvString);
});
});
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("miez.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]);
var options = {
title: "Weight tracking",
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'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(view, options);
});
}
</script>
</head>
<body>
<div id="chart">
</div>
</body>
</html>
CSV 非常简单，只有日期和重量。
Date,Weight
2014-10-25 09:58:30 +0000,86.025
2014-10-25 10:14:38 +0000,88.44836
2014-10-25 13:08:13 +0000,84.04703
最佳答案
jquery-csv library提供将 csv 字符串转换为数组以供 google.visualization.arrayToDataTable() 使用的能力(他们的例子 here )。为了使这项工作有效，将 jquery.csv.js 添加到您的服务器(在下面的示例中，我假设它与您的 HTML 在同一文件夹中)并在您的 <head> 中链接到它。 .以下是您可以添加到 <head> 的简单脚本开始。我假设是散点图，但此过程适用于任何图表 here .呈现图表的 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);
});
}
关于javascript - 从 CSV 输入创建 Google 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26576144/