个人中心
gpt4 book ai didi

javascript - 我如何从 csv 中读取数据，而不是准备好的数据？

转载 作者：行者123 更新时间：2023-12-03 07:41:13 30 4
gpt4 key购买 nike

我有这段代码，我想用 csv 中的数据更改静态数据

csv 看起来像:

GPA,Total Distance,id
3.27,22.0,20032202
2,64.0,20038107
2.81,10.0,20051566
2.33,66.5,20060382

我想在 y 轴上添加 GPA和 X 轴上的总距离

当我尝试从 d3 库添加代码时，它不起作用

<html>
  <head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {
  packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'GPA');

  data.addRows([
    [0, 0],
    [1, 10],
    [2, 23],
    [3, 17],
    [4, 18],
  ]);

  var options = {
    hAxis: {
      title: 'Total Distance'
    },
    vAxis: {
      title: 'GPA'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);
}

    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

最佳答案

这是我能想到的可以帮助您的最佳答案。

在你的问题中，你必须处理 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 访问。

关于javascript - 我如何从 csv 中读取数据，而不是准备好的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35403301/

30 4 0
文章推荐： haskell - Haskell 中的 Goto : Can anyone explain this seemingly insane effect of continuation monad usage?
文章推荐： aws-cloudformation - 有没有办法从 AWS CDK 中的 qldb.CfnLedger 获取生成的 QLDB 分类帐名称？
文章推荐： aws-lambda - 如何使用 cloudformation 和 SAM 将所需的策略添加到 lambda
文章推荐： visual-studio-2012 - 如何将 Visual Studio 安装项目迁移到 InstallShield Limited Edition？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com