Многолинейные диаграммы 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 библиотеки, но добавить к data2 этому объекту в начале:

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

Я думаю, что число точек не равно - data2 имеет 1 очко меньше. Он должен решить вашу проблему :-)

Answer 2

Я нахожу решение этой проблемы. Вам просто нужно использовать множественную линейную диаграмму XY. Пример: http://c3js.org/samples/simple_xy_multiple.html