C3.js在两个不同的列或数据系列之间绘制线

Question

我有三个时间序列，它们使用空值绘制在同一张图上，因此任何一次只能显示一个序列，基本上是为上升和下降点获得不同的颜色。

有人知道我如何将这些点和线链接在一起，即使它们来自不同的系列？我知道使用条形图，您可以为不同系列使用组功能以使它们彼此重叠显示，但是这似乎不适用于折线。这是未连接点的图片：

Answer 1

如果将数据作为单独的序列提供给C3，且其中的序列不应绘制为零，那么您会得到所需的效果。在此代码片段中，我使用了两个系列-您可能希望每个上升和下降的点都具有一个系列。

var chart = c3.generate(
{
    bindto: '#chart',
    size: {
      width: 600,
      height: 180
    },
  data: {
    x: 'xLabels',
    columns: [
      ['xLabels', '2015-09-17 00:00:00','2015-09-18 00:00:00','2015-09-19 00:00:00','2015-09-20 00:00:00','2015-09-21 00:00:00','2015-09-22 00:00:00','2015-09-23 00:00:00','2015-09-24 00:00:00'],
     ['data1', 5,10,12,17,null,null,null,null],
     ['data2', null,null,null,null,17,13,12,11],
     ['data3', null,null,null,17,17,null,null,null],
    ],
    xFormat: '%Y-%m-%d %H:%M:%S', // ### IMPORTANT - this is how d3 understands the date formatted in the xLabels array 
    types: {
      'data1': 'area-spline',
      'data2': 'area-spline',
      'data3': 'line'
    },
  colors: {
     data3: '#cccccc'
    }    
  },
  point: {
    show: true    
  },
  legend: {
      position: 'inset',
  inset: {
      anchor: 'top-left',
      x: 20,
      y: 10,
      step: 2
    }
  },
  axis: {
    y: {
      tick: {
        format: function (d) { return d + "%"; }
      }
    },
    x: {
      type: 'timeseries',
      tick: {
        format: '%Y-%m-%d'  // how the date is displayed
      }
    }
  }, 
  tooltip:{
    format:{
      title:function (x) { return x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear() + " " + x.getHours()+ ":" + x.getMinutes() },
    }
  }  
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>

<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>