将CHARTJS与JavaScript数组一起使用

Question

我的以下代码存在一些问题：

 function processData(csv)
 {
    var allTextLines = csv.split(/\r\n|\n/);
    var tarr = [];

    for (var i=1; i<11; i++) 
    {
        var data = allTextLines[i].split(';');
        if (i==1)
        {
            tarr = [{ commande: data[0], periode: data[1], jours: data[2] }];  
        }

        tarr = tarr.concat([{ commande: data[0], periode: data[1], jours: data[2] }]);
    }   

    $('#chartContainer').dxChart('option', 'dataSource', tarr);
 }

正如您可能已经了解的那样，我只是尝试使用将要从CSV文件读取的新值来“刷新” CHARTJS chartContainer。 不幸的是，当我使用简单的javascript数组作为数据源时，它似乎不起作用。 不过，使用“ concat”是最好的方法，因为在这种情况下，“ push”只是一团糟，而且我没有设法生成任何东西。

我想读取一个CSV文件并生成一个js数组，如下所示：

var dataSource = [
    { commande: "Commande 001", periode: "2014/01", jours: 12.0 },
    { commande: "Commande 002", periode: "2014/01", jours: 35.0 },

    { commande: "Commande 001", periode: "2014/02", jours: 24.0 },
    { commande: "Commande 002", periode: "2014/02", jours: 68.0 },

    { commande: "Commande 001", periode: "2014/03", jours: 91.0 },
    { commande: "Commande 002", periode: "2014/03", jours: 76.0 },

    { commande: "Commande 001", periode: "2014/04", jours: 53.0 },
    { commande: "Commande 002", periode: "2014/04", jours: 48.0 },

    { commande: "Commande 001", periode: "2014/05", jours: 31.0 },
    { commande: "Commande 002", periode: "2014/05", jours: 10.0 },

    { commande: "Commande 001", periode: "2014/06", jours: 90.0 },
    { commande: "Commande 002", periode: "2014/06", jours: 10.0 },

    { commande: "Total", periode: "2014/01", jours: 47.0 },
    { commande: "Total", periode: "2014/02", jours: 92.0},
    { commande: "Total", periode: "2014/03", jours: 167.0 },
    { commande: "Total", periode: "2014/04", jours: 101.0 },
    { commande: "Total", periode: "2014/05", jours: 41.0 },
    { commande: "Total", periode: "2014/06", jours: 100.0 },                             
];

这是我用来制作我的第一个图表的代码（不读取任何内容），并且似乎工作正常。

使用tarr Array刷新此图表，读取CSV文件是我的问题。

Y轴绝对不受控制！ （多个值，多个0，X轴损坏，但不是图表本身，因为我在CSV文件中放入了随机值）。

我的（简单）CSV：

commande,periode,jours
Commande 001;2014/01;0.0
Commande 002;2014/01;86.0
Commande 001;2014/02;83.0
Commande 002;2014/02;78.0
Commande 001;2014/03;81.0
Commande 002;2014/03;76.0                  
Commande 001;2014/04;83.0
Commande 002;2014/04;38.0
Commande 001;2014/05;81.0
Commande 002;2014/05;0.0
Commande 001;2014/06;100.0
Commande 002;2014/06;0.0                 
Total;2014/01;72.0
Total;2014/02;61.0
Total;2014/03;57.0
Total;2014/04;11.0
Total;2014/05;81.0
Total;2014/06;100.0

我不明白 任何帮助，将不胜感激 ！

Answer 1

首先，检查您的regexp csv.split(/\\r\\n|\\n/)是否返回行数组。 如果正确，则应重写方法，以便：

function processData(csv)
{
    var allTextLines = csv.split(/\r\n|\n/);
    var tarr = [];

    for (var i = 1; i < allTextLines.length; i++) 
    {
        var data = allTextLines[i].split(';');
        tarr.push({ commande: data[0], periode: data[1], jours: parseFloat(data[2]) });
    }

    $('#chartContainer').dxChart('option', 'dataSource', tarr);
}

我将var data移入了厕所； 用push代替concat ; 并将数字11替换为数组的长度。

适用于jsFiddle的证明： http : //jsfiddle.net/WL22j/1/