如何使用C3图表填充两行之间的区域？

Question

1. 请打开此链接：http://c3js.org/samples/timeseries.html

2. 通过以下代码替换textarea的代码：

   var chart = c3.generate({
     data: {
       x: 'x',
       columns: [
         ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04',],
         ['bottomline', null,30, 150, 250],
         ['topline', 130, 340, 350,null]
       ]
     },
     axis: {
       x: {
         type: 'timeseries',
         tick: {
           format: '%Y-%m-%d'
         }
       }
     }
   });
   

3. 您将能够看到如下图1所示的图表。

4. 现在我想用一些颜色填充图中显示的两条线之间的区域。我想让它像下面的 Fig：2 。

   Fig:1 and then Fig:2

5. 请帮帮我。

提前致谢。

Answer 1

这是一个老问题，但万一有人也遇到了这个问题。这是两条线之间填充的工作小提琴。 Fill between two lines

注意：在馈送到图表之前应该处理零点，因为从C3的角度来看，null将自动映射到0。

代码段：

function fillArea(){
var indexies = d3.range( items.length );
var yscale = chart.internal.y;            
var xscale = chart.internal.x; 

var area = d3.svg.area()
  .interpolate("linear")
  .x(function(d) { return xscale(new Date(items[d].x)); })
  .y0(function(d) { return yscale(items[d].bottomline); })
  .y1(function(d) { return yscale(items[d].topline); });  

d3.select("#mychart svg g").append('path')
  .datum(indexies)
  .attr('class', 'area')
  .attr('d', area);}