2

我对 java-script 和 html 的东西很陌生。我正在尝试使用 example.csv 文件用 Google 图表制作一个基本的折线图，但是出了点问题。我没有看到任何图表。什么都没有显示。请帮忙。在阅读了一些类似的代码后，我想出了代码

我所需要的只是从这个基本的工作代码开始并发展成更高级的形状

<html>

<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="jquery.csv-0.71.js"></script>
    <script type="text/javascript">

        //google.load('visualization', '1', {packages: ['corechart', 'line']});
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(BasicLine);

        function BasicLine() {
             // grab the CSV
            $.get("example.csv", function(csvString) {
            // transform the CSV string into a 2-dimensional array
                var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
                var data = new google.visualization.arrayToDataTable(arrayData);



            ]);

            var options = {
                hAxis: {
                    title: 'Time'
                },
                vAxis: {
                    title: 'Temperature'
                },
                backgroundColor: '#f1f8e9'
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
</body>

</html>

我的 CSV 文件如下

Hour, Temperature
1, 70
2, 65
3, 60
4, 65
5, 67
6, 69
4

1 回答 1

2

有一个语法错误（控制台应该告诉你这个）。

固定版本：

<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(BasicLine);

    function BasicLine() {
        $.get("example.csv", function(csvString) {
            var arrayData = $.csv.toArrays(csvString, 
                                          {onParseValue: $.csv.hooks.castToScalar}),
                data      = new google.visualization.arrayToDataTable(arrayData),
                options   = {
                              hAxis: {
                                title: 'Time'
                              },
                              vAxis: {
                                title: 'Temperature'
                              },
                              backgroundColor: '#f1f8e9'
                            },
                chart     = new google.visualization
                              .LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        },
        'text');
    }
</script>
于 2015-08-16T00:48:48.770 回答