我正在尝试使用数据通过谷歌图表绘制图表。 我有几个不同的 CSV 文件，当选择不同的选项时，我尝试使用不同的文件。第一个文件已正确加载并显示图表，但 $("#selection").change(...) 不起作用..我的代码:
<html>
<head>
<title>Google charts</title>
<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script type='text/javascript'>
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(function() {
$(document).ready(function run(){
$("#selection").val("file1.csv");
var filename = "file1.csv";
drawChartfromCSV();
$("#selection").change(function() {
filename = ("#selection").val();
drawChartfromCSV();
});
function drawChartfromCSV() {
$.get(filename, function(csvString) {
$("#chart").html(csvString);
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "title haxis",
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.LineChart(document.getElementById('csv2chart'));
chart.draw(view, options);
});
}
});
});
</script>
</head>
<body>
Select a file
<select id="selection">
<option value="file1.csv">file1</option>
<option value="file2.csv">file2</option>
<option value="file3.csv">file3</option>
</select>
<div id="csv2chart" style="width: 900px; height: 500px;"> </div>
</body>
最佳答案
代码有错误
$("#selection").change(function() {
//the $ was missing before ("#selection").val()
filename = $("#selection").val();
drawChartfromCSV();
});
关于javascript - 如何通过谷歌图表动态使用数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23656838/