使用 Highchart 读取 CSV答案

【问题标题】：Reading a CSV with Highchart使用 Highchart 读取 CSV
【发布时间】：2012-04-26 14:54:07
【问题描述】：

我正在努力从我的 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>

【问题讨论】：

标签： javascript csv highcharts

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：