c3.jsに複数のXY線グラフを持つデータ配列の数が多いか不明

Question

私はしばらくの間c3.jsを使用していましたが、最近問題が発生しました。私はMultiple XY Line Chart機能を使用しています。私のデータセットは膨大です。ハードコーディングするのではなく、自動的にデータ軸のバインディング（xsの部分）を行う方法はありますか？

あなたが発生する前に、あなただけ（allmydata）オブジェクトにあるすべてのX1/DATA1のなどのものを想定すると、関連するXシリーズに

をあなたのデータシリーズのタイトルの構文と一致する機能を構築する必要があります

var chart = c3.generate({ 
     data: { 
      xs: { 
       'data1': 'x1', 
       'data2': 'x2', 
       . 
       . 
       . 
       'datan': 'xn', 
      }, 
      columns: [ 
       ['x1', 10, 30, 45, 50, 70, 100], 
       ['x2', 30, 50, 75, 100, 120], 
       . 
       . 
       . 
       ['xn', 45, 60, 80, 120, 130], 
       ['data1', 30, 200, 100, 400, 150, 250], 
       ['data2', 20, 180, 240, 100, 190], 
       . 
       . 
       . 
       ['datan', 10, 150, 220, 160, 300] 
      ] 
     } 
    }); 

Answer 1

あなたができるチャート：

var allmydata = [ 
       ['x1', 10, 30, 45, 50, 70, 100], 
       ['x2', 30, 50, 75, 100, 120], 
       ['xn', 45, 60, 80, 120, 130], 
       ['data1', 30, 200, 100, 400, 150, 250], 
       ['data2', 20, 180, 240, 100, 190], 
       ['datan', 10, 150, 220, 160, 300] 
    ]; 

var match = function (dataStr) { 
    return dataStr.startsWith("data") ? dataStr.replace ("data", "x") : undefined; 
}; 

var xs = {}; 
allmydata.forEach (function (series) { 
    var seriesName = series[0]; 
    var xsName = match (seriesName); 
    if (xsName) { 
     xs[seriesName] = xsName; 
    } 
}); 

var chart = c3.generate({ 
     data: { 
      xs: xs, 
      columns: allmydata 
     } 
}); 

http://jsfiddle.net/0f38ffsy/1/