Question

我对java-script和html的东西很新。我正在尝试使用example.csv文件制作一个基本的谷歌图表图表，但是有些错误。我没看到任何图表。什么都没有显示出来。请帮忙。我在阅读了一些相似的代码后想出了代码

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

<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

Answer 1

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

修正版：

<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>

来自CSV的Google Line图表

1 个答案: