Question

我很难从我的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 code：

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

Answer 1

问题是$.get调用会立即返回，因此您将在下载test.csv之前创建图表（根本不包含任何数据）。

传递给$.get的回调函数将在下载文件时运行，因此在此处创建图表可以解决问题。

Answer 2

图表没有数据，因为csv文件是在图表之后加载的，因为get请求需要时间来接收响应。以下内容将加载文件中的数据，并在文件加载后显示图表。

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

使用Highchart读取CSV

2 个答案: