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

Question

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

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

Answer 1

如果您将数据作为单独的系列呈现给 C3，其中系列不应绘制为空值，那么您将获得类似所需效果的东西。在这个 sn-p 中，我使用了两个系列 - 您需要每个上升和下降的点集都有一个系列。

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>