我正在嘗試使用Highcharts JS創建條形圖，但是條形圖不會在該圖上繪制嗎？

Question

這是我的編碼，它適用於具有幾行和幾列的小型csv文件，但不適用於具有很多行和列的文件。

這是我要為其創建圖形的文件的一部分：

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

這是代碼：

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>

希望這次我對我的問題很具體，不會減分，不會被關閉。

謝謝

Answer 1

問題是您的CSV解析器不正確，您需要生成csv哪些項目用逗號分隔，或修改解析器。 因為ie在這一行：

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

您嘗試用逗號提取行中的所有項目，但不要這樣做。 您需要將其替換為“空白”：

var items = line.split(' ');

就像您在CSV中一樣。 此外，您嘗試將“ Date Time 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值。 例如，我選擇第三列。