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

我找到了解决这个问题的方法。您只需要使用多个XY线图。示例：http://c3js.org/samples/simple_xy_multiple.html