1

This is my coding it works for a small csv file having couple of rows and columns but not for the file with many rows and columns.

This is a part of the file for which I want to create graph:

Date    Time    Tcoll   Tstor   TglyHXin    TglyHXout   TH2OHXout   Tcold       Thot
01/01/2013  0:00:54 103.34  103.32  26.94   23.06   32.31   13.81   40.06   46.06
01/01/2013  0:01:55 103.29  103.3   26.94   23.06   32.31   13.81   40.06   46
01/01/2013  0:02:55 103.29  103.33  26.95   23.06   32.31   13.81   40.06   46
01/01/2013  0:03:55 103.29  103.03  26.94   23.06   32.31   13.81   40.06   46.05
01/01/2013  0:04:55 103.34  103.27  26.94   23.06   32.31   13.81   40.06   46.02
01/01/2013  0:05:55 103.39  103.33  26.94   23.06   32.31   13.81   40.04   45.99
01/01/2013  0:06:55 103.3   103.01  26.94   23.06   32.31   13.81   40.05   45.94
01/01/2013  0:07:55 103.42  103.17  26.94   23.06   32.31   13.81   40.06   45.89
01/01/2013  0:08:55 103.37  103.16  26.94   23.06   32.31   13.8    40.03   45.88
01/01/2013  0:09:55 103.34  103.28  26.94   23.06   32.31   13.8    40.01   45.88

Here is the coding: 

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'January Analysis'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Temperature'
        }
    },
    series: []
};

$.get('WEL_log_2013_01.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }

        // the rest of the lines contain data with their name in the first position
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
});
</script>

Hope this time I am specific with my question and will not get minus points and get closed..

Thanks

4

1 回答 1

1

问题是您的 CSV 解析器不正确，您需要生成 csv 哪些项目用逗号分隔，或者修改解析器。因为即在这一行：

 $.each(lines, function(lineNo, line) {
    var items = line.split(',');

您尝试通过逗号从行中提取所有项目，但事实并非如此。您需要将其替换为“空白”：

var items = line.split(' ');

就像你在 CSV 中一样。此外，您尝试将“日期时间 Tcoll Tstor TglyHXin TglyHXout TH2OHXout Tcold Tho”这些值推送到类别，但我假设您希望从第一列中获取日期。结果应该是：

$.each(lines, function(lineNo, line) {
    var items = line.split(' ');

    // header line containes categories
    if (lineNo > 0) {
        var series = {
            data: []
        };

                options.xAxis.categories.push(item[0]);
                series.data.push(parseFloat(item[2]));

        options.series.push(series);

    }

});

在这一series.data.push(parseFloat(item[2]))行中，您定义哪一列应该是 y 值。例如，我选择第三列。

于 2013-05-24T15:19:08.127 回答