而不是现成的数据，我如何从CSV中读取

这是我能想出的帮助你的最佳答案。

在你的问题中，你必须在javascript中处理不同的主题

• 在 JavaScript 中获取本地文件的内容
• 将此内容解析为 CSV 文件(并使其成为多维数组(
• 准备要放入图表中的值

首先，添加以下两个库：jQuery用于简化的ajax对文件的调用，jquery-csv用于解析内容的简化方法。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

然后，您必须重新路由图表回调：您必须指向一个异步获取文件内容的函数(getFileContent在下面的示例中(。

只有在成功的情况下，您才能将 csv 数据格式化为数组。

只有这样，您才能通过将格式化和排序的数组传递给drawbasic方法，将数据提供给图表。

最后，你最终得到了那个脚本

<script type="text/javascript">
    google.charts.load('current', {
        packages: ['corechart', 'line']
    });
    google.charts.setOnLoadCallback(getFileContent);
    function getFileContent() {
        var filePath = 'file:///path/to/file.csv';
        // 1. Get local file content asynchronously
        $.get(filePath, {}, function (data) {
            console.log(arguments);
            var lines = $.csv.toArrays(data); // 2. Parse the csv as a multidimensional array
            var header = lines.shift(); // 3. Remove the header of the file
            // 4. Sort the lines by the second column
            lines.sort(function (a, b) {
                if (a[1] === b[1]) {
                    return 0;
                }
                else {
                    return (a[1] < b[1]) ? -1 : 1;
                }
            });
            // 5. Pass your lines to the draw method
            drawBasic(lines);
        }, 'text')
                .fail(function () {
                    console.log(arguments);
                })
        ;
    }
    function drawBasic(lines) {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'GPA');
        for (i = 0; i < lines.length; i++) {
            // 6. Don't forget to parse as float the numbers in the array, they are strings at this point
            // You'll get a 'Type mismatch. Value 3,27 does not match type number' error if you don't
            var xValue = parseFloat(lines[i][1]);
            var yValue = parseFloat(lines[i][0]);
            data.addRow([xValue, yValue]);
        }
        var options = {
            hAxis: {
                title: 'Total Distance'
            },
            vAxis: {
                title: 'GPA'
            }
        };
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
    }
</script>

不要忘记更改 getFileContent 中的文件路径，前面是 file://

归功于SO中的答案，这些答案帮助我创建了这个答案：

• Javascript - 读取本地文本文件
• 如何按列值对二维数组进行排序？

旁注

显示数据时，通过HTTP调用获得csv(或者，使用Javascript，JSON更好(会更常见。 本地文件读取可以保留用于服务器端处理，使此内容通过 HTTP 可用。