C3.jsと異なるデータに同じjsonキーを使用

Question

C3.jsを使用して同時に2つの異なるtimeseriesデータをプロットしたい場合、同じ構造（以下に示す）のjson変数に格納します。

次のコードでは、グラフは2番目のデータセットで上書きされ、2つのデータをオーバーレイすることはできません。 違うデータに対して同じキーを使うことが原因だと思います。 どうすれば解決できますか？

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     json: jsonVariable1, 
     keys: { 
      x: 'Time', 
      value: ['Value'] 
     }, 
     names: { 
      Value: 'Past Fatigue' 
     }, 
     types: { 
      Value: 'area' 
     } 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y-%m-%d', 
       count: 5 
      } 
     } 
    }, 
    zoom: { 
     enabled: true 
    } 
}); 

setTimeout(function() { 
    chart.load({ 
     json: jsonVariable2, 
     keys: { 
      x: 'Time', 
      value: ['Value'] 
     }, 
     types: { 
      Value: 'area' 
     } 
    }); 
}, 2000); 



jsonVariable1 
"[{"Time":"2016-03-24T04:54:27.580Z","Value":0},{"Time":"2016-03-24T20:12:00.000Z","Value":15.292338671638888},{"Time":"2016-03-24T20:26:00.000Z","Value":14.592338671638888},{"Time":"2016-03-24T21:26:00.000Z","Value":15.592338671638888},{"Time":"2016-03-24T21:52:00.000Z","Value":15.159005338305555},{"Time":"2016-03-24T22:07:00.000Z","Value":14.409005338305555},{"Time":"2016-03-24T22:14:00.000Z","Value":14.292338671638888},{"Time":"2016-03-24T22:26:00.000Z","Value":13.692338671638888},{"Time":"2016-03-24T23:32:00.000Z","Value":14.792338671638888},{"Time":"2016-03-24T23:39:00.000Z","Value":14.67567200497222},{"Time":"2016-03-25T00:05:00.000Z","Value":13.37567200497222},{"Time":"2016-03-25T00:22:00.000Z","Value":13.092338671638887},{"Time":"2016-03-25T00:26:00.000Z","Value":12.892338671638887},{"Time":"2016-03-25T00:36:00.000Z","Value":12.392338671638887},{"Time":"2016-03-25T01:01:00.000Z","Value":11.975672004972221},{"Time":"2016-03-25T01:14:00.000Z","Value":11.32567200497222},{"Time":"2016-03-25T01:27:00.000Z","Value":11.109005338305554}]" 

jsonVariable2 
"[{"Time":"2016-03-25T19:37:00.000Z","Value":29.27567200497222},{"Time":"2016-03-25T19:43:00.000Z","Value":29.175672004972217},{"Time":"2016-03-25T20:02:00.000Z","Value":28.225672004972218},{"Time":"2016-03-25T20:07:00.000Z","Value":28.142338671638885},{"Time":"2016-03-25T20:13:00.000Z","Value":28.042338671638884},{"Time":"2016-03-25T20:25:00.000Z","Value":27.442338671638883},{"Time":"2016-03-25T20:27:00.000Z","Value":27.409005338305548},{"Time":"2016-03-25T23:02:00.000Z","Value":29.99233867163888},{"Time":"2016-03-25T23:09:00.000Z","Value":29.875672004972213},{"Time":"2016-03-25T23:27:00.000Z","Value":28.975672004972214},{"Time":"2016-03-25T23:35:00.000Z","Value":28.575672004972215},{"Time":"2016-03-26T00:07:00.000Z","Value":28.04233867163888},{"Time":"2016-03-26T00:27:00.000Z","Value":27.04233867163888},{"Time":"2016-03-26T02:45:00.000Z","Value":29.34233867163888},{"Time":"2016-03-26T02:49:00.000Z","Value":29.275672004972215},{"Time":"2016-03-26T04:54:27.580Z","Value":31.36666666666666}]" 

Answer 1

あなたはmapを用いて、以下に示すように設定されたデータを取得することができます。

var x1 = jsonVariable1.map(function(d) { 
    return d.Time 
    }); 
    x1.unshift("x1") 
    var x2 = jsonVariable2.map(function(d) { 
    return d.Time 
    }); 

    x2.unshift("x2") 
    var data1 = jsonVariable1.map(function(d) { 
    return d.Value 
    }); 
    data1.unshift("data1") 

    var data2 = jsonVariable2.map(function(d) { 
    return d.Value 
    }); 
    data2.unshift("data2") 

次に新しいデータセットと以下のようにC3の構成を定義する：

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     columns: [ 
     x1,//jsonVariable 1 date 
     x2,//jsonVariable 2 date 
     data1,//jsonVariable 1 value 
     data2////jsonVariable 2 value 
     ], 
     xFormat: '%Y-%m-%dT%H:%M:%S.%LZ', 
     xs: { 
     'data1': 'x1', 
     'data2': 'x2', 
     }, 
     names: { 
     Value: 'Past Fatigue' 
     }, 
     types: { 
     data1: 'area', 
     data2: 'area' 
     } 
    }, 
    axis: { 
     x: { 
     type: 'timeseries', 
     tick: { 
      format: '%Y-%m-%dT%H:%M:%S.%LZ', 
      count: 5 
     } 
     } 
    }, 
    zoom: { 
     enabled: true 
    } 
    }); 

作業コードhere