c3.js包含缺失數據/​​不同x值的多行圖表

Question

我的c3.js與多行圖表和每行不同的x值有問題。 例如：

data1 = [ 
    { 
    "date": 1470520800000, 
    "admin": 10 
    }, 
    { 
    "date": 1470607200000, 
    "admin": 10.06 
    }, 
    { 
    "date": 1470693600000, 
    "admin": 10.03 
    }, 
    { 
    "date": 1470780000000, 
    "admin": 10 
    }, 
    { 
    "date": 1470866400000, 
    "admin": 10.05 
    }, 
    { 
    "date": 1470952800000, 
    "admin": 10 
    } 
]; 

data2 = [ 
    { 
    "date": 1470607200000, 
    "user": 94.66 
    }, 
    { 
    "date": 1470693600000, 
    "user": 316.58 
    }, 
    { 
    "date": 1470780000000, 
    "user": 10 
    }, 
    { 
    "date": 1470866400000, 
    "user": 1.5 
    }, 
    { 
    "date": 1470952800000, 
    "user": 12 
    } 
]; 

    var chart = c3.generate({ 
     data: { 
      json: data1, 
      keys: { 
       x: 'date', 
       value: ["admin"] 
      } 
     }, 
     axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
        format: function (x) { return x.toLocaleDateString(); } 
       } 
      } 
     }, 
     padding: { 
      right: 50 
     } 
    }); 

    chart.load({ 
       json: data2, 
       keys: { 
        x: "date", 
        value: ['user'] 
       } 
      }); 

數據不顯示以及當我親緣他們與我的鼠標。 我在這裏發佈我的代碼https://jsfiddle.net/gahm5wgb/。

Answer 1

我從來沒有使用c3.js庫，但在開始添加到數據2這個對象：

{ 
    "date": 1470520800000, 
    "user": 0 
    }, 

我想點的數量是不相等的 - 數據2有1點少。它應該解決你的問題:-)

Answer 2

我找到解決這個問題的辦法。你只需要使用多個XY折線圖。例如：http://c3js.org/samples/simple_xy_multiple.html