0

CSV ファイルから折れ線グラフを出力するのに苦労しています。グラフは表示されますが、グラフ内のデータは表示されません。誰か、以下のコードの何が問題なのか教えてください。

CSV のデータは次のようにフォーマットされます。

26-04-2012 09:10,0
26-04-2012 09:20,0
26-04-2012 09:30,0
26-04-2012 09:40,0
26-04-2012 09:50,0
26-04-2012 10:00,1
26-04-2012 10:10,1

HTML コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="../../js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {

        var c = [];
        var d = [];

        $.get('test.csv', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                c.push(items[0]);
                d.push(parseInt(items[1]));
            });
        });
        var options = {
                chart: {
                    renderTo: 'chart',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'reading'
                },
                xAxis: {
                    title: {
                        text: 'Date Measurement'
                    },
                    categories: c
                },
                yAxis: {
                    title: {
                        text: 'reading'
                    }
                },
                series: [{
                    data: d
                }]
        };

        var chart = new Highcharts.Chart(options);

    });
</script>
   </head>
   <body>
        <div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
   </body>
</html>
4

2 に答える 2

3

問題は、$.get呼び出しがすぐに返され、その結果、test.csvがダウンロードされる前にグラフを作成することです（データはまったく含まれていません）。

渡すコールバック関数$.getはファイルのダウンロード時に実行されるため、グラフの作成をそこに配置すると問題が解決します。

于 2012-04-30T06:45:49.130 に答える
2

get リクエストは応答を受信するのに時間がかかるため、チャートの後に csv ファイルが読み込まれるため、チャートはデータなしで読み込まれます。以下は、ファイルからデータをロードし、ファイルのロード後にグラフを表示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                      <html>
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="../../js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {

        var c = [];
        var d = [];
        var options = {
                chart: {
                    renderTo: 'chart',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'reading'
                },
                xAxis: {
                    title: {
                        text: 'Date Measurement'
                    },
                    categories: c
                },
                yAxis: {
                    title: {
                        text: 'reading'
                    }
                },
                series: [{
                    data: d
                }]
        };

        var jqxhr = $.get('test.csv', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                c.push(items[0]);
                d.push(parseInt(items[1]));
            })
            var chart = new Highcharts.Chart(options);

        });
    });
</script>
   </head>
   <body>
        <div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
   </body>
</html>
于 2012-04-30T07:18:31.527 に答える