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

Question

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

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

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>

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

C3.js drawing lines between two different columns or data series

c3.js