谷歌折线图从CSV

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

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

固定版本:

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

相关内容

最新更新

热门标签：