Проблема с отображением данных из CSV-файла для старших графиков

Question

Я пытаюсь создать график line старшей диаграммы, используя данные из файла .csv.Но моя веб-страница просто показывает названия осей 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, так как нам нужно ждать, пока данные будут возвращены с сервера. Смотрите это .

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

Также упомяните явно тип возвращаемых данных: "Текст" , что может быть проблемой через некоторое время.

Answer 3

Вы должны правильно прочитать документацию. Смотри http://www.highcharts.com/documentation/how-to-use#preprocessing

У них уже есть демоверсия CSV http://highcharts.com/studies/data-from-csv.htm.

Пожалуйста, просмотрите документы и ознакомьтесь! .