Charts 谷歌散点图从上传的csv文件

如何从上传的csv文件中绘制谷歌散点图

它显示一个空白页

我尝试了以下代码：

加载脚本：

<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

然后我从一个例子中得到了这一部分：

<script> // wait till the DOM is loaded
    $(function() { 
        // grab the CSV
        $.get("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.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("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.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 = {};

                    var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
                    chart.draw(view, options);
                }); }
    </script>

//等待加载DOM
$（函数（）{
//抓住CSV
$.get（”https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.csv“，函数（csvString）{
//显示CSV的内容
$（“#chart”）.html（csvString）；}）；
//从Google加载可视化库并设置侦听器
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
//抓住CSV
$.get（”https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.csv，函数（csvString）{
//将CSV字符串转换为二维数组
var arrayData=$.csv.toarray（csvString，{onParseValue:$.csv.hooks.castToScalar}）；
//这个新的DataTable对象保存所有数据
var data=新的google.visualization.arrayToDataTable（arrayData）；
//此视图可以一次选择数据的子集
var view=new google.visualization.DataView（data）；view.setColumns（[0,1]）；
var选项={}；
var chart=new google.visualization.ScatterChart（document.getElementById（'chart'）；
图表绘制（视图、选项）；
}); }

该示例有一个错误

下一行末尾的括号

$("#chart").html(csvString); }); }); <-- these two sets of brackets

---

我复制了你的代码，但它没有显示任何内容。你检查过浏览器控制台的错误吗？（按F12）

$(function() {
    // grab the CSV
    $.get("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.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("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.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 = {};

                var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
                chart.draw(view, options);
            }); }
     }); });