javascript - 我正在尝试使用 Highcharts JS 创建条形图，但条形图不会绘制在图表上？

Question

这是我的编码，它适用于具有几行和几列的小型 csv 文件，但不适用于具有许多行和列的文件。

这是我要为其创建图表的文件的一部分:

Date    Time    Tcoll   Tstor   TglyHXin    TglyHXout   TH2OHXout   Tcold       Thot01/01/2013  0:00:54 103.34  103.32  26.94   23.06   32.31   13.81   40.06   46.0601/01/2013  0:01:55 103.29  103.3   26.94   23.06   32.31   13.81   40.06   4601/01/2013  0:02:55 103.29  103.33  26.95   23.06   32.31   13.81   40.06   4601/01/2013  0:03:55 103.29  103.03  26.94   23.06   32.31   13.81   40.06   46.0501/01/2013  0:04:55 103.34  103.27  26.94   23.06   32.31   13.81   40.06   46.0201/01/2013  0:05:55 103.39  103.33  26.94   23.06   32.31   13.81   40.04   45.9901/01/2013  0:06:55 103.3   103.01  26.94   23.06   32.31   13.81   40.05   45.9401/01/2013  0:07:55 103.42  103.17  26.94   23.06   32.31   13.81   40.06   45.8901/01/2013  0:08:55 103.37  103.16  26.94   23.06   32.31   13.8    40.03   45.8801/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>

希望这次我的问题很具体，不会被扣分并被关闭。

谢谢

Answer 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 值。例如，我选择第三列。