使用高图创建图表时出错

Question

我需要使用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轴类别。所以，我想创建一个像 the one seen here

我发这个图表：

$(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（像2月），另一列应具有以下值：

  7271 4537 5379 245 0 1941 
  

你能帮我吗？

Answer 1

你现在拥有它的方式最终会有14个系列，每个系列包含6个数据点。你真正需要做的，如果你能为改变CSV文件，以便您的列代表月份和行代表的系列，像这样：

然后您可以创建于各行的阵列，并通过数组高图。我认为你的代码应该与上面的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); 
});