Javascript 从CSV加载Google注释图表_Javascript_Csv_Charts_Google Visualization

Javascript 从CSV加载Google注释图表

javascript csv charts google-visualization

Javascript 从CSV加载Google注释图表,javascript,csv,charts,google-visualization,Javascript,Csv,Charts,Google Visualization,我正在尝试通过使用以下示例从CSV文件加载一些数据来创建Google注释图表：我试图修改代码（使用我有限的JS知识）以从CSV文件加载，但没有得到任何图形到目前为止，我的代码是： <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type='text/javascrip

我正在尝试通过使用以下示例从CSV文件加载一些数据来创建Google注释图表：

我试图修改代码（使用我有限的JS知识）以从CSV文件加载，但没有得到任何图形

到目前为止，我的代码是：

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() 
{
$.get('test.csv', function(csvString) 
{
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
arrayData = arrayData.map(function (row) 
{
return 
[new Date(row[0]),row[1]];
});


var data = google.visualization.arrayToDataTable(arrayData);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
displayAnnotations: true
};

chart.draw(data, options);
}
}
</script>
</head>

<body>
<div id='chart_div' style='width: 900px; height: 500px;'></div>
</body>
</html>

对于此任务，您需要遵循3个步骤

激发ajax请求并获取csv数据

将csv数据转换为数组

在google graph中传递csv数组

请参考以下示例：

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type='text/javascript'>

        //Step 1: Get string from csv
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "test.csv",
                dataType: "text",
                success: function (data) {
                    //Step 2: Convert "," seprated string into array
                    let arrData = csvToArray(data);
                    //Step 3: call chart with array data
                    callChart(arrData);
                }
            });
        });

        //convert csv string into array function
        function csvToArray(allText) {
            var allTextLines = allText.split(/\r\n|\n/);
            var headers = allTextLines[0].split(',');
            var lines = [];

            for (var i = 1;i < allTextLines.length;i++) {
                var data = allTextLines[i].split(',');
                if (data.length == headers.length) {

                    var tarr = [];
                    for (var j = 0;j < headers.length;j++) {
                        tarr.push(headers[j] + ":" + data[j]);
                    }
                    lines.push(tarr);
                }
            }
            return lines;
        }

        function callChart(arrData) {
            google.charts.load('current', { 'packages': ['annotationchart'] });
            google.charts.setOnLoadCallback(function () { drawChart(arrData); });
        }

        function drawChart(arrData) {
            var data = new google.visualization.DataTable();
            //Step 4: add csv your column
            data.addColumn('date', 'Date');
            data.addColumn('number', 'Kepler-22b mission');
            //Step 5: pass your csv data as array
            data.addRows(arrData);
            var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
            var options = {
                displayAnnotations: true
            };
            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <div id='chart_div' style='width: 900px; height: 500px;'></div>
</body>
</html>


//步骤1：从csv获取字符串
$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“test.csv”，
数据类型：“文本”，
成功：功能（数据）{
//步骤2：将字符串转换为数组
设arrData=csvToArray（数据）；
//步骤3：使用数组数据调用图表
呼叫图（arrData）；
}
});
});
//将csv字符串转换为数组函数
函数csvToArray（所有文本）{
var allTextLines=allText.split（/\r\n |\n/）；
var headers=allTextLines[0]。拆分（'，'）；
var行=[]；
对于（var i=1；i

首先，将jquery和jquery csv添加到页面中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

对多次编辑表示歉意。有重大问题，试图获得正确的代码格式，所以我的问题将被接受。谢谢回复。我尝试运行此操作，但在第7行ReferenceError:$未定义AddjQuery lib from cdn

尝试了此操作，但现在得到的语法错误：'*，：x'不是有效的选择器或库，我在运行时遇到了这个错误：jsapi_compiled_default_module.js:128 Uncaught错误：未知头类型：1233在jsapi_compiled_default_module.js:128在Array.map（）在gvjs_r（jsapi_compiled_format_module.js:45）在gvjs_Rba（jsapi_compiled_default_module.js:128）在Object.gvjs.gvjs_[as arrayToDataTable]（jsapi_编译_default_module.js:130）在drawChart（test.html:46）在Object.success（test.html:20）在u（jquery.min.js:2）在Object.fireWith[as resolveWith]（jquery.min.js:2）在k（jquery.min.js:2）我正在使用webserver for Chrome插件，因为它不允许加载CSV，因为“跨源请求”errorWorked！我的数据有问题。已修复，现在从CSV加载。非常感谢您的帮助。我将进一步改进我的图表，因此如果我遇到问题，希望您能提供帮助：-）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>