Как создать Highcharts с помощью файла data.csv

Question

привет, я создал файл 'data.csv' и теперь я хочу создать старшую диаграмму, используя содержимое этого файла data.csv.Содержимое моего 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

Теперь я написал код JavaScript для визуализации данных и создания старшей диаграммы, но на моей веб-странице ничего не отображается.мой код

        $(document).ready(function() {

    var options = {
            chart: {
                renderTo: 'chart',
                defaultSeriesType: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'reading',
                x: -20      //center
            },
            xAxis: {
                title: {
                    text: 'Date Measurement'
                },
                categories: []
            },
            yAxis: {
                title: {
                    text: 'reading'
                }
            },
            series: []
    };

    $.get('C:/Program Files (x86)/Zend/Apache2/htdocs/myproject/public/data.csv', function(data) {

        // Split the lines using newline '\n' as delimiter
        var lines = data.split('\n');

        $.each(lines, function(lineNo, line) {

            // split the line elements using comma ',' as delimiter
            var items = line.split(',');

            $.each (items, function(itemNo, item) {
                if(itemNo == 0)
                    options.xAxis.categories.push(item);
                else if(itemNo > 0) {
                    var series = {
                            data: []
                    };
                    series.data.push(parseFloat(item));
                };
                options.series.push(series);
            });
            var chart = new HighCharts.Chart(options);
        });
    });

});

я не знаю, делаю ли я что-то не так.любая помощь будет отличной.спасибо.

Answer 1

Вам нужно поработать над Javascript, особенно если вы хотите сделать несколько Highcharts.

Шаги -

Подготовьте ваши данные.

Создать объект параметров.

Визуализация диаграммы.

Код ниже работает, если вы поместите файл data.csv в тот же каталог, что и ваш html file.

$(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);

});