Question

当我查看问题How do I select which columns from my CSV to chart with HighChart?时，我尝试使用csv文件应用它，但我无法让它工作！

我做错了什么？提前谢谢你：

$(function () {
//var data = "Year,Month,Day,Hour,Time,kWh,Savings,Total kWh\n2013,02,06,11,11:00,0,0,308135\n2013,02,06,11,11:59,15,1.875,308150\n2013,02,06,12,12:59,27,3.375,308177\n2013,02,06,13,13:59,34,4.25,308211\n2013,02,06,14,14:59,32,4,308243";
var options = {
    chart: {
        renderTo: 'EXAMPLE',
        defaultSeriesType: 'line'
    },
    title: {
        text: 'Current Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: hassayampa.csv', 
        x: -20
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis:{        
        title: {
            text: 'Temperature (\xB0C)'
        },
        //min: 0
    },
    legend:{
            layout: 'vertical',
            //backgroundColor: '#FFFFFF',
            //floating: true,
            align: 'left',
            //x: 100,
            verticalAlign: 'top',
            //y: 70,
            borderWidth: 0
         },
    series: [{
        name: 'PRIM OUT TEMP',
        data: []
    }, {
        name: 'SEC OUT TEMP',
        data: []
    }]
};

// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){   
    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])
            }
        }

    });
});
new Highcharts.Chart(options);
});

这是jsfiddle：http://jsfiddle.net/tonystinge/3bQne/1223/

Answer 1

我现在明白了......

// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){   
    // parsing here...
});

new Highcharts.Chart(options);
});

您的问题是new Highcharts.Chart(options)来电的放置。 $.get（与大多数ajax调用一样）是异步因此new Highcharts将在完成之前被调用。

将其更改为：

// data is variable from $.get()
$.get('http://www.geoinc.org/Dropbox/geo/sites/GC_ROOM/EXAMPLE.csv', function(data){   
    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])
            }
        }
    });
    new Highcharts.Chart(options); // this is now in the $.get callback function
});

从CSV中选择要使用HighChart绘制图形的列

1 个答案: