Javascript 使用highchart创建图表时出错

我需要使用CSV数据创建柱状图/条形图。以下是数据的格式：

A 156600 154965  45679  184736 160819 42329
B 7271   4537    5379   245    0      1941
C 4347   19143   1075   397    6860   0
D 15     11283   1477   0      0      0
E 6323   537697  222430 21701  98725  3792
F 0      0       0      0      0      0
G 284356 744986  616369 0      0      106877
H 0      0       0      0      0      0
I 0      0       0      32962  0      0
J 0      12742   616    0      0      0
K 0      1215413 1420   0      0      0
L 0      0       0      0      0      0
M 24191  50166   18163  55282  48262  5862
N 0      0       0      0      0      20396

这里我将手动添加X轴类别。因此，我想创建如下图表

我做了这个：

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column'
        },
        title: {
            text: 'Total Transactions'
        },
        xAxis: {
           categories: [],labels : { y : 20, rotation: -45, align: 'right' }
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        series: []
    };

    $.get('data.csv', function(data) {
        // Split the lines
        var lines = data.split('\n');
                var series = { 
                    name: 'Transactions ',
                    data: []
                };
        $.each(lines, function(lineNo, line) {

            var items = line.split(',');
            if (lineNo != 0) {
                $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            options.xAxis.categories.push(item);
                        } else if (itemNo == 2){

                            series.data.push(parseFloat(item));
                        }
                });
            }

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

});

但它取列值意味着：

156600
7271    
4347    
15  
6323    
0   
284356
0   
0   
0   
0   
0   
24191   
0   

但我需要这个：

• 对于A（如Jan），该值应为

  156600 154965 45679 184736  160819  42329
  

• 对于B（如Feb），另一列应具有以下值：

  7271 4537   5379    245 0   1941
  

---

你能帮帮我吗？

按照你现在的方式，你将得到14个系列，每个系列包含6个数据点。如果可以，您真正需要做的是更改csv文件，使列表示月份，行表示系列，如下所示：

然后，您可以为每一行创建一个数组，并将该数组传递给highchart。我认为您的代码应该与上面的csv结构一起工作，因为您是基于执行拆分的\n

编辑

如果您无法更改CSV文件的格式，则下面修改的代码应根据需要构建6系列。它假定列或行没有标题。它还忽略了超过一年12个月的最后两行

$.get('data.csv', function(data) {
  var lines = data.split('\n');
  var series1 = {name: 'India', data: []};
  var series2 = {name: 'China', data: []};
  var series3 = {name: 'Australia', data: []};
  var series4 = {name: 'Shreelanka', data: []};
  var series5 = {name: 'US', data: []};
  var series6 = {name: 'Cuba', data: []};

  $.each(lines, function(lineNo, line) {
    var items = line.split(',');
    //IGNORE THE LAST TWO ROWS
    if (lineNo < 12) {
      $.each(items, function(itemNo, item) {
        if (itemNo == 0) {
          series1.data.push(parseFloat(item)); 
        } else if (itemNo == 1){
          series2.data.push(parseFloat(item));
        } else if (itemNo == 2){
          series3.data.push(parseFloat(item));
        } else if (itemNo == 3){
          series4.data.push(parseFloat(item));
        } else if (itemNo == 4){
          series5.data.push(parseFloat(item));
        } else if (itemNo == 5){
          series6.data.push(parseFloat(item));
        }
      });
    }
  });
  options.series.push(series1);
  options.series.push(series2);
  options.series.push(series3);
  options.series.push(series4);
  options.series.push(series5);
  options.series.push(series6);
  var chart = new Highcharts.Chart(options);
});

$.get（'data.csv'，函数（数据）{
变量行=data.split（'\n'）；
var series1={name:'India'，数据：[]}；
var series2={name:'China'，数据：[]}；
var series3={name:'Australia'，数据：[]}；
var series4={name:'shrelanka'，数据：[]}；
var series5={name:'US'，数据：[]}；
var series6={name:'Cuba'，数据：[]}；
$.each（行，函数）（行号，行）{
var items=line.split（'，'）；
//忽略最后两行
如果（行号<12）{
$。每个（项目，功能（项目编号，项目）{
如果（itemNo==0）{
series1.data.push（parseFloat（item））；
}else if（itemNo==1）{
series2.data.push（parseFloat（item））；
}否则如果（itemNo==2）{
series3.data.push（parseFloat（item））；
}否则如果（itemNo==3）{
series4.data.push（parseFloat（item））；
}否则如果（itemNo==4）{
series5.data.push（parseFloat（item））；
}否则如果（itemNo==5）{
series6.data.push（parseFloat（item））；
}
});
}
});
选项.系列.推送（系列1）；
选项.系列.推送（系列2）；
选项.系列.推送（系列3）；
选项.系列.推送（系列4）；
选项.系列.推送（系列5）；
选项。系列。推送（系列6）；
var图表=新的Highcharts.图表（选项）；
});

如果字母代表一年中的几个月，那么您必须输入许多字母。一年只有12个月。然而，你有14封信。字母M和N代表什么？很难说数据是什么样子，因为示例数据不是逗号分隔的，但代码是在“，”上拆分的。您的示例数据看起来只是一个长字符串，而不是拆分成行/新行。这是真的吗？如果A是“像Jan”，那么为什么不叫它“Jan”？通过查看它，我猜您需要6个独立的系列。我说得对吗？看起来你只是在代码中创建了一个系列。好的，让我解释一下：月份，印度，中国，澳大利亚，美国，古巴，1月，156601549654567918473616081942329二月，727145375379245，01941三月，43471914310753976860，0现在使用上面的数据，我需要创建与下面链接中提到的相同的图表-在上面的图表中，一月一起为托克约、纽约、伦敦和柏林展示……与此表单类似，我的一月数据需要为印度、中国、澳大利亚、斯里兰卡、美国、古巴创建与链接中图表相同的列……因此，您确实希望图表中包含6个独立的系列。A行代表一月，L行代表十二月。中间的所有字母代表中间的月份。那么M行和N行代表什么呢？谢谢…你有我的问题。。。我们将忽略M和N。我已经尝试了很多，但无法获得预期的结果，请您确定我需要在上述代码中修改哪些内容。如果您可以修改CSV文件，使其符合我为您显示的上述格式，则您的代码应按原样工作。我会检查一下这是否可行。如果是这样，一切对你来说都会更干净、更容易。如果您手动创建一个具有上述格式的文件，并通过您的程序运行它，您将看到我的意思。如果您无法更改CSV文件的组织，请查看我编辑的答案。嗨，玲儿……我今天尝试了。首先，向您致敬的是，您向我解释的方式真的很棒。基本上，我来自大型机，所以退出对我来说很困难，但按照你解释的方式，我现在明白了…它工作得很好..谢谢你留恋。。！！欢迎光临。如果我的答案有效，请投票并将其标记为接受答案。请查看您是否不知道如何投票或将问题标记为已接受。