为 highcharts 显示 csv 文件中的数据时出现问题

Question

我正在尝试使用 .csv 文件中的数据创建一个高图 line 图表。但我的网页只显示 x 和 y 轴的标题，但没有数据。代码如下：

$(document).ready(function() {
    var c = [];
    var d = [];

$.get('data.csv', function(data) {                  
    alert("data in the file: " + 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: 'Weight Monitor'
        },
        xAxis: {
            title: {
                text: 'Date Measured'
            },
            categories: c
        },
        yAxis: {
            title: {
                text: 'Weight (in Lbs)'
            }
        },
        series: [{
            data: d
        }]
};
var chart = new Highcharts.Chart(options);
    });

我试图在屏幕上打印从文件读取的数据，只是为了检查文件是否被正确读取并且我得到了正确的数据，但我的图表仍然没有显示任何内容。

以下是我的 csv 文件中的数据：

    2011-08-01 00:00:00,155
    2011-08-02 00:00:00,156
    2011-08-03 00:00:00,157
    2011-08-03 00:00:00,160

其中左值是要在 x 轴上显示的日期，右值是图形的读取点。

任何帮助将不胜感激。

Answer 1

您的代码完美运行。

<script type="text/javascript">

    $(document).ready(function() {

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

        $.get('data.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>   

复制整个代码并将其保存为目录中的 .html 文件，并在同一目录中创建 data.csv 文件，并确保没有空行、不需要的空格和换行符结束。

然后打开 .html 文件，图表应该会显示正确的数据。

Answer 2

在 $.get 中添加图表。 注意，我们不能在 Ajax 回调之外创建图表，因为我们必须等待从服务器返回的数据。见this。

$.get('data.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);

    },'Text');

还要明确提及 "Text" 的数据返回类型，这在某些时候可能会成为问题。

Answer 3

您必须正确阅读文档。见http://www.highcharts.com/documentation/how-to-use#preprocessing

他们已经有一个 csv http://highcharts.com/studies/data-from-csv.htm 的演示。

请浏览文档并熟悉自己！ .