C3.js

ile farklı veriler için aynı json anahtarını kullanma C3.js'yi kullanarak aynı anda iki farklı zaman aralığı verisini çizmek istiyorum ve bunlar aynı yapıya sahip json değişkenlerinde depolanır (aşağıda gösterilmiştir).C3.js

Aşağıdaki kodla, ikinci veri kümesi tarafından grafiğin üzerine yazılır ve iki veriyi kaplayamaz. Farklı veriler için aynı anahtarın kullanılmasından kaynaklandığını düşünüyorum. Nasıl çözülebilir?

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}]"

kaynak

2016-03-26 salto

ayarlayabilir veri map kullanarak aşağıda gösterildiği gibi alabilirsiniz:

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")

Ardından yeni veri kümesi ile aşağıdaki gibi c3 yapılandırmasını tanımlayın:

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 
    } 
    });

çalışma kod here

kaynak

2016-03-26 11:43:53 Cyril

cevap

İlgili konular