使用C3.js对不同的数据使用相同的json键

Using same json key for different data with C3.js

本文关键字：json 数据 C3 使用 js      更新时间：2023-09-26

我想使用C3.js同时绘制两个不同的时间序列数据，它们存储在具有相同结构的json变量中（如下所示）。

使用以下代码，图表将被第二个数据集覆盖，并且不能覆盖两个数据。我认为这是由于对不同的数据使用相同的密钥造成的。如何解决？

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

您可以使用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
     }
   });

此处的工作代码

相关文章：