如何让 Highcharts 理解 CSV 文件中的“年份类别”？答案

【问题标题】：How to make Highcharts understand "Year-Category" in CSV file?如何让 Highcharts 理解 CSV 文件中的“年份类别”？
【发布时间】：2013-03-04 10:40:29
【问题描述】：

我会说它以前有效。现在，我同时更新到最新的 Highcharts 版本。而且，不知道为什么，它突然想要绝对显示我的 CSV 文件的第一个“列”。它看起来像这样：

,Switzerland,Europe,Global
1980,0.02854,0.01931,0.00547
1981,0.02898,0.01931,0.00549

Highcharts（“我的代码”）想要显示这个“”列。如果我将其更改为“年”或“类别”，那都是一样的。我在图例中没有三个，而是四个条目。

Highcharts 代码如下所示：

    // Split the lines
    var lines = data.split('\n');
    $.each(lines, function(lineNo, line)
    {
        var items = line.split(',');

        // header line containes series name
        if (lineNo === 0)
        {
            $.each(items, function(itemNo, item)
            {
                if (item!='')
                {
                    if(item == 'Switzerland')
                    {
                        options.series.push(
                        {
                            name:item,
                            lineWidth: 5, 
                            data:[]
                        });
                    }
                    else
                    {
                        options.series.push(
                        {
                            name:item,
                            data:[]
                        });
                    }
                }
            });
        }
        ....

我试图换行

  if (item!='')

类似

  if ((item!='') && (item!=' '))

或

  if ((item!='') && (item!='Years'))

（当我在 CSV 文件的第一位添加“年”时），但我只收到错误消息...

感谢任何提示！

【问题讨论】：

你能说明问题是什么吗？

标签： csv highcharts

【解决方案1】：

我从过去找到了类似的示例，问题仅出在索引上，该索引在将点推送到系列期间使用。解析器：

 var options = {
                chart: {
                    renderTo: 'container',
                    zoomType:'xy'
                },
                xAxis:{
                    categories:[],
                    tickInterval:10,
                    tickmarkPlacement:'on'
                },
                title: {
                    text: 'Oviedo hoy'
                },
                series: []
            };

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

                        // header line containes series name
                        if (lineNo === 0) {

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

                                if(itemNo == 0)
                                    options.xAxis.categories.push(item)
                                else
                                    options.series[itemNo-1].data.push(parseFloat(item));

                            });
                        }
                    });

                    var chart = new Highcharts.Chart(options);
                });

【讨论】：

谢谢。但是，我看到的唯一区别是“itemNo-1”。除此之外它没有帮助，我认为问题在于“标题行包含系列名称”部分。在那里，在“$.each”循环中，应该有类似“if (itemNo == 0) {do nothing} elseif (item != '') { .... }”的内容。但由于我不明白的原因，这会停止该部分的任何计算。
那么哪些值不正确呢？我使用 itemNo-1 是因为，当您解析并拥有 if(itemNo == 0) 时，您将价值赋予类别。没错，但是当你有 itemNo == 1 时，你需要使用 itemNo-1，因为系列是从 0 开始编号的，而不是从 0 开始。因此，如果你没有 itemNo-1 那么你会有一个空的系列。

【解决方案2】：

经过一番折腾，现在是这样的：

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

            // header line containes series name
            if (lineNo === 0)
            {
                $.each(items, function(itemNo, item)
                {
                    if (itemNo > 0)
                    {
                        if(item == 'Switzerland')
                        {
                            options.series.push(
                            {
                                name:item,
                                lineWidth: 5, 
                                data:[]
                            });
                        }
                        else
                        {
                            options.series.push(
                            {
                                name:item,
                                data:[]
                            });
                        }
                    }
                });
            }
            // the rest of the lines contain data with their name in the first position
            else
            {
                $.each(items, function(itemNo, item)
                {
                    if(itemNo == 0)
                    {
                        options.xAxis.categories.push(item);
                    }
                    else if (item == "null")
                    {
                        options.series[itemNo-1].data.push(null);
                    }
                    else
                    {
                        options.series[itemNo-1].data.push(parseFloat(item));
                    }
                });
            }
        });

        //console.log(options.series);
        var chart = new Highcharts.Chart(options);
        });
    });

【讨论】：