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 に答える