如何使用HighChart从CSV中选择哪些列？ [英] How do I select which columns from my CSV to chart with HighChart?

问题描述

我想从CSV文件创建一个图表，该文件包含每个时间值的多个数据值。

I am trying to create a graph from a CSV file that contains multiple data values for each time value. I would like to graph two of those data points, but have not been able to figure out how to import the CSV file into an array.

这里是我的一个示例，我将在下面的例子中看到这些数据。 CSV

Here is a sample of my CSV

Year,Month,Day,Hour,Time,kWh,Savings,Total kWh
2013,02,06,11,11:00,0,0,308135
2013,02,06,11,11:59,15,1.875,308150
2013,02,06,12,12:59,27,3.375,308177
2013,02,06,13,13:59,34,4.25,308211
2013,02,06,14,14:59,32,4,308243

我想在y上绘制 kWh 和轴和沿x轴的时间。任何帮助将不胜感激。我使用标准代码导入Highcharts的CSV文件，但我确定我需要改变它。感谢！

I would like to graph kWh and Savings on the y-axis and the Time along the x-axis. Any help would be appreciated. I am using the standard code for importing a CSV file for Highcharts, but am sure I need to change it somehow. Thanks!

    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column'
        },
        title: {
            text: 'Wind Turbine Hourly Production'
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'kWh'
            }
        },
        series: []
    };

    /*
     Load the data from the CSV file. This is the contents of the file:

        Apples,Pears,Oranges,Bananas,Plums
        John,8,4,6,5
        Jane,3,4,2,3
        Joe,86,76,79,77
        Janet,3,16,13,15

     */ 
    $.get('medford-hour.csv', function(data) {
        // Split the lines
        var lines = data.split('\n');
        $.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);

            }

        });

推荐答案

您需要编写自己的解析器。下面是一个简单的例子，如下所示：

You need to write your own parser. Here is simple example how could this look like:

var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
    var items = line.split(',');
    if(lineNo !== 0) {
       var x = + new Date(items[1]+'/'+items[2]+'/'+items[0]+' '+items[4]),
           kwh = parseFloat(items[5]),
           savings = parseFloat(items[6]);
        if(!isNaN(kwh) && !isNaN(savings)){
            options.series[0].data.push([x,kwh]);
            options.series[1].data.push([x,savings])
        }
    }
}

和jsfiddle： http://jsfiddle.net/3bQne/36/

And jsfiddle: http://jsfiddle.net/3bQne/36/

这篇关于如何使用HighChart从CSV中选择哪些列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！