如何使用谷歌图表动态使用数据

Question

我正在尝试使用数据来绘制带有谷歌图表的图表。 我有几个不同的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>

Answer 1

代码中有错误

$("#selection").change(function() {
//the $ was missing before ("#selection").val()
    filename = $("#selection").val();
    drawChartfromCSV();
});

Answer 2

你首先需要清除图表，你错过了前面的$（“＃select”）。val（）; ！ 这应该可以解决您的问题：

$("#selection").change(function() {
   chart.clearChart()
   filename = $("#selection").val();
   drawChartfromCSV();
});

我认为你必须首先检查图表是否已经存在，如果不是清除图表

Answer 3

正如其他人所指出的， $("#selection").change(function() {...});存在语法错误$("#selection").change(function() {...}); 代码，但你也应该删除$(document).ready(function run(){...}); 你已经包装了你的代码。 来自谷歌加载器的回调可能会在文档“就绪”触发后运行，因此您的内部函数可能永远不会运行。 如果等待文档准备在您的代码中很重要，您可以遵循javascript的一般最佳实践并将图表代码粘贴在页面底部，或者您可以执行以下操作：

function run() {
    // chart code here
}
var state = {
    ready: false,
    loaded: false
};
google.load("visualization", "1", {packages: ["corechart"], callback: function () {
    state.loaded = true;
    if (state.ready) {
        run();
    }
}});
$(document).ready(function () {
    state.ready= true;
    if (state.loaded) {
        run();
    }
});

如何使用谷歌图表动态使用数据

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-05-14 14:10:05

解决方案2
0 2014-05-14 14:06:23

解决方案3
0 2014-05-14 16:46:30

如何使用谷歌图表动态使用数据

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-05-14 14:10:05

解决方案2 0 2014-05-14 14:06:23

解决方案3 0 2014-05-14 16:46:30

解决方案1
2 已采纳 2014-05-14 14:10:05

解决方案2
0 2014-05-14 14:06:23

解决方案3
0 2014-05-14 16:46:30