使用谷歌可视化查询查询CSV文件

我试图用谷歌可视化查询查询csv文件，但每次我都会收到"查询错误：找不到404文件"错误，无法解决。

任何意见/建议/想法都将不胜感激。

注意-csv文件存在于我的本地服务器上，如果单击链接http://localhost:35802/test.csv它为我下载了文件

这是我的代码--

<html>
    <head>
        <script type="text/javascript"     src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    function initialize() {
        //var opts = { sendMethod: 'auto' };
        // Replace the data source URL on next line with your data source URL.
        var query = new google.visualization.Query('csv?url=http://localhost:35802/test.csv');
        // Optional request to return only column C and the sum of column B, grouped by C members.
        query.setQuery('select * ');
        // Send the query with a callback function.
        query.send(handleQueryResponse);
    }
    function handleQueryResponse(response) 
    {
        if (response.isError()) 
        {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        //alert(response);
        var data = response.getDataTable();
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, { height: 400 });
    }
</script>
        <script type="text/javascript">
      google.charts.load('current', {packages: ['corechart']});
      google.charts.setOnLoadCallback(initialize);
    </script>
</head>
<body>
<div id="chart_div"></div>
</body>

这是我的csv文件内容--A、 B、C1,2,34,5,6

非常感谢@WhiteHat提供的指针。。终于我把它搞定了…：）罪魁祸首是我正在加载的谷歌库。

起初我正在加载--<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>这对我不起作用…

我可以通过将此库更改为<script type="text/javascript" src="https://www.google.com/jsapi"></script>

对于任何需要工作样本的人来说，它是——请将路径更改为csv文件

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        //        var query = new google.visualization.Query('http://www.gstatic.com/external_hosted/gstatic/charts/static/data.csv',
        //          { csvColumns: ['string', 'number'], csvHasHeader: true });
        var opt = { sendMethod: 'xhr' }; //{ csvColumns: ['string', 'number'], csvHasHeader: true, sendMethod: auto });
        //var query = new google.visualization.Query('http://local:6572/data.csv', opt);
        var query = new google.visualization.Query('http://localhost:6572/data.csv');
        query.setQuery('select *');
        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('csv'));
        chart.draw(data, { legend: { position: 'none'} });
    }
</script>
</head>
<body>
<div id="csv" style="width: 900px; height: 500px;"></div>
</body>
</html>

相关内容

最新更新

热门标签：