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

});

如何使用data.csv文件创建高级图表

1 个答案: